Sanal Kütüphane » Web Programlama » Javascript/Ajax » Google Map API'ye Başlangıç

Google Maps API kendi sitenize bedava Google Haritasını eklemenizi sağlayan javascript kütüphanesidir. Bu yazıda siteniz nasıl Google Haritası ekleyeceğiniz anlatılıyor.

Yazar: Mahmut Kavici
Gönderen: mkavici
Tarih: 08:27 27-11-2006
Derece:
Yorumlar: (0)
Google Maps API kendi sitenize bedava Google Haritasını eklemenizi sağlayan javascript kütüphanesidir. Bu yazıda siteniz nasıl Google Haritası ekleyeceğinizi ve haritaya katman(bölge ve nokta) ekleme anlatılıyor.

Başlangıç:
Öncelikle bu ücretsiz Google hizmetinde yararlanmak için siteniz için bir Google Map anahtarı oluşturmanız gerekiyor. http://www.google.com/apis/maps/signup.html adresinden web sitenizin adresini girip belitilen koşulları girmeniz yeterli. Oluşturduğunuz anahtarı sitenizdeki tüm dizinlerde kullanabilirsiniz (Örnek: http://biltec.org/map/ gibi ) Ayrıca hemen kullanmaya başlamak için örnek bir HTML kodu üretecek.

http://www.biltec.org için oluşturulmuş örnek kodlar şöyle;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAEdmdbN3_LLmNarikN3TrshRJEhM5G8kmHTLX-nVEQd2nxILXrxReVjVzjTtpCiXzXwQM78vLxzqdWQ"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Temeller

Aşağıdaki kod ile yeni bir GMap oluşturuyor ve id'si map olan element içinde görünmesini sağlıyoruz. 
 var map = new GMap2(document.getElementById("map"));
 map.setCenter(new GLatLng(37.4419, -122.1419), 13); //burada haritanın merkezini belirliyoruz
// GLatLng nesnesi enlem ve boylam değerlerini alıyor.
// 39.9207918361198  32.85409927368164 Kızılay Meydanı gibi

Kontrol Ekleme

map.addControl(new GSmallMapControl()); //küçük yön tuşları ve büyütme küçüktme kontrolü
map.addControl(new GMapTypeControl());

Bilgi Baloncuğu Ekleme

map.openInfoWindow(map.getCenter(),
  document.createTextNode("Merhaba Dünya"));

İşaretleyici Ekleme

var marker = new GMarker(map.getCenter(), {draggable: false});
map.addOverlay(marker);

Örnek Görünüm
Yükleniyor...
Devam edecek..

Javascript/Ajax Kategorisindeki Diğer Sayfalar

» JavaScript İle Değişkenler
» Web Uygulamalarında Yeni Bir Yaklaşım AJAX
Henüz yorum yapılmamış