Html Google Maps

Google Map Mashup Oluşturma: Adım Adım Rehber

Eğer tek bir harita üzerinde birden fazla yeri görselleştirmek istiyorsanız şanslısınız! Bir Google Map mashup oluşturmak düşündüğünüzden daha kolay. Bu blog yazısında, bir Google Map üzerinde itme pimleri ile birden fazla yeri yerleştirmenin en basit yolunu öğreneceğiz. Yazının sonunda, sadece birkaç basit adımda kendi etkileşimli haritanızı oluşturabileceksiniz.

Sorun: Birden Fazla Yeri Haritalamak Nasıl

Aşağıdaki gibi bir yer listesine sahip olduğunuzu düşünün:

  • El Cerrito, CA
  • Corvallis, OR
  • Morganton, NC
  • New York, NY
  • San Diego, CA

Mesele, bu yerleri işaretleyen itme pimleri ile bir Google Haritası oluşturmaktır. Bunu nasıl kolayca başarabileceğimize bakalım.

Başlarken

Kodlamaya başlamadan önce, Google Haritalar’ın temellerini projenize entegre ettiğinizden ve elinizde bir Google Haritalar API Anahtarı bulunduğundan emin olun. Bu anahtar, Google Haritalar özelliklerine erişmek için gereklidir.

Örnek HTML Yapısı

Başlamak için temel bir yapı burada:

<head>
  <script 
   type="text/javascript"
   src="http://maps.google.com/maps?file=api&v=1&key=YOUR_API_KEY">
  </script>
</head>
<body onload="createMap()" onunload="GUnload()">
  <div id="map" style="width: 600px; height: 400px;"></div>
</body>

Adım 1: Haritayı Ayarlayın

Öncelikle haritayı başlatmamız gerekiyor. İşte basit bir başlangıç fonksiyonu:

function createMap() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.44, -122.14), 14);
}

Açıklama

  • GMap2: Yeni bir harita başlatır.
  • setCenter: Haritayı belirtilen enlem ve boylamda merkezler.

Adım 2: Her Yer İçin İşaretleyiciler Oluşturun

Harita üzerinde yerleri göstermek için, enlem ve boylam koordinatlarını kullanarak işaretleyiciler oluşturacağız. İşte nasıl:

var where = new GLatLng(37.925243, -122.307358); // El Cerrito, CA
var marker = new GMarker(where); // İşaretleyici oluştur
map.setCenter(where); // İşaretleyici üzerine haritayı merkezle
map.addOverlay(marker); // Haritaya işaretleyiciyi ekle

Daha Fazla Yer Eklemek

Her şehir için koordinatları manuel olarak ayarlamanız gerekecek, bu da zorlayıcı olabilir. Bunun yerine, her adres için enlem ve boylamı otomatik olarak almak için Google’ın Geocoder hizmetini kullanmayı düşünebilirsiniz.

Adım 3: Geocoder Kullanımı

Enlem ve boylamı manuel olarak aramak yerine, bu kod parçasını kullanın:

var address = "El Cerrito, CA";
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
  if (point) {
    map.clearOverlays(); // Önceki işaretleyicileri temizle
    map.addOverlay(new GMarker(point)); // Yeni işaretleyiciyi ekle
    map.setCenter(point, 10); // Haritayı merkezle ve yakınlaştır
  }
});

Açıklama

  • GClientGeocoder: Bu hizmet, adresleri coğrafi koordinatlara dönüştürmeye yardımcı olur.
  • getLatLng: Adrese dayalı olarak enlem ve boylamı alır.

Adım 4: Tüm Yerleri Döngüyle Geçin

Son olarak, birçok yer haritalıyorsanız, bunları bir dizide saklayın ve her işaretleyiciyi oluşturmak için bir döngü çalıştırın:

var locations = ["El Cerrito, CA", "Corvallis, OR", "Morganton, NC", "New York, NY", "San Diego, CA"];
locations.forEach(function(location) {
  geocoder.getLatLng(location, function(point) {
    if (point) {
      map.addOverlay(new GMarker(point));
    }
  });
});

Sonuç

Farklı yerler için itme pimleri ile bir Google Map mashup oluşturmak yalnızca basit olmakla kalmaz, aynı zamanda verileri görselleştirmenin harika bir yoludur. Doğru ayar ve biraz kodlama ile, herhangi bir yer listesinde etkileşimli bir deneyim yaratabilirsiniz.

Kısa Özet:

  • Google Haritalar API’nizi ayarlayın.
  • Haritayı başlatın.
  • Kesinlik için coğrafi kodlama kullanarak işaretleyiciler oluşturun.
  • Birden fazla yeri kolayca döngüyle geçin.

Şimdi kendi harita mashup’unuzu oluşturma zamanı! Mutlu kodlamalar!