Giriş
VB.NET
CSharp.NET
SQL Server
Dokümanlar
Örnek Çalışmalar
Sorun Çözücü
78 Puan   Google Maps Api ile Web Sayfalarında Harita Kullanmak
Caner ARAS 16 Haziran 2008 Pazartesi 16:34
CSharp.NET
  Toplam (4) yorum yapıldı

Bu makalemizde Google Map Api'sini kullanarak web sayfalarımızda dinamik içerikli haritalar oluşturacağız. Kısaca Google Map'den söz edecek olursak, Web Tarayıcılarında harita uygulamaları için kullanılan bir servistir. Aynı zamanda uydu görüntülerini de kullanıcılarına sunabilen kaliteli ve hızlı bir altyapıya sahiptir.

Bu servisten yararlanmamız için öncelikle http://www.google.com.tr/apis/maps/signup.html adresinden bir Api-Key almamız gerekiyor. ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmcFTEJQA67VZ_RQxL5RUIy5G-nWOAfKPD_Q0H****** bu şekilde bir key elde etmiş olmamız gerekiyor.

Gelelim bu servisi nerede kullanacağımıza daha çok emlak ile ilgili portallarda kullanılmaktadır. Bu servisi kullanan örnek türk portallarıda mevcut. sahibinden.com, emlakbox.com gibi? Bizde uygulamamızı bir emlak ilanının lokasyon bilgilerini tutacak şekilde hazırlayacağız.


JS Kodumuz: (map.js)

    var map = null;

 

    function goto_map_position()

    {

      

       var lat = document.forms[0].txtLatitude.value;

       var lng = document.forms[0].txtLongitude.value;

       map.panTo(new GLatLng(lat,lng));

    }

 

    function load() {

      if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById("map"));

       

        //---navigasyon için

        //map.addControl(new GSmallMapControl());

       

        //---harita uydu menüsü için

        //map.addControl(new GMapTypeControl());

       

       

        GEvent.addListener(map, "moveend",

           function()

           {

              var center = map.getCenter();

              //  isteğe göre aktif / pasif edilebilir
              //  Eğer sayfa yüklenirken datadan koordinatları çekecekseniz ilgili txt lere bu koordinatları yazdırmanız lazım ki o koordinatlara gitsin,

              document.forms[0].txtLatitude.value = center.lat();

              document.forms[0].txtLongitude.value = center.lng();

           }

        );

       

        //---girişte görünecek koordinatlar, burda Türkiyenin görüşürü var, yandaki 15 ise Zoom değeri, bunu da bir txt den yada DropDownlistten alabilirsiniz, burda manuel yazdım,


       
map.setCenter(
new GLatLng(38.75408327579141, 36.38671875), 15);

      }

    }

   

    function AddMarker()

    {

       //--info tabı için

       var infoTabs = [

          new GInfoWindowTab("Yer", document.forms[0].txtName.value),

          new GInfoWindowTab("Açıklama", document.forms[0].txtDescription.value)

       ];

 

       //---click eventi için

       var marker = new GMarker(map.getCenter());

       GEvent.addListener(marker, "click",

       function() {

          //---info tabı açılması

          marker.openInfoWindowTabsHtml(infoTabs);

       });

      

       //---ekleme

       map.addOverlay(marker);

      

       marker.openInfoWindowTabsHtml(infoTabs);

      

       //---içlerini temizliyoruz (isteğe göre aktif pasif edilebilir)

       //document.forms[0].txtName.value="";

       //document.forms[0].txtDescription.value="";

    }