Google Map kullanarak Harita Google bazı ürünlerini kısıtlı kullanım alanlarından sıyırıp yaratıcı ellere teslim ederek hem kendisine duyulan sempatiyi arttırıyor hem de biz kullanıcılara yeni kullanım alanları açabiliyor.

Mesela Google Map'i kendinize göre özelleştirebilirsiniz, isterseniz Google Map'i kullanarak kendi sitenize de bir harita koyabilirsiniz. Hatta istediğiniz koordinatlara resimler koyup üzerlerine tıklandığında bilgi mesajları çıkmasını sağlayabilirsiniz.
Tüm bunlar için yapılması gereken ilk iş sitenizi Google'a kayıt ettirmek, böylece sitenizde bir Google haritası yayınlanmasına izin verilecek. Kayıt işlemi için aşağıdaki adres'e gitmek gerekiyor:
http://www.google.com/apis/maps/signup.html

Bundan sonrası Google'ın sayfalarında ayrıntılı olarak anlatılmış:
http://www.google.com/apis/maps/documentation/

---

Ben basit bir örneği de burada yayınlayacağım. Aşağıda örneğin görüntüsü var :)

---

Örnek haritanın kodu ise şöyle:

---

Bölüm bölüm açıklayayım:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAE7oo8KaknWWETXnKzOqhnRSghx6uyneHtZIHVxL8UFhzX-BGRxRGcjuVfNM_uaRb5y7oUVrdPWdILw"
type="text/javascript">
</script>

Bu bölümde Google'ın sunduğu ve haritayı özelleştirmek için kullancağımız fonksiyonların nerede olduğunu belirtiyoruz.
Buradaki önemli nokta key=.. bölümüne ne yazacağınızı bilmek. Yukarıda bahsettiğim sayfadan Google Map'e kayıt olduğunuzda siteniz için bir anahtar kelime üretilecek, üretilen bu anahtar kelimeyi buraya yazmanız gerekiyor.

---

<script type="text/javascript">
//<![CDATA[
function haritaGoster() {
if (GBrowserIsCompatible()) {
var denemeHaritasi = new GMap2(document.getElementById("haritaDiv"));
denemeHaritasi.addControl(new GSmallMapControl());
var koordinat = new GLatLng(41.07314,29.039612);
var resimKoordinat = new GLatLng(41.06554,29.009622);
var resim = new GIcon();
resim.image = "http://sezer.yesiltas.googlepages.com/ornek.png";
resim.iconAnchor = new GPoint(6, 5);
resim.infoWindowAnchor = new GPoint(25, 2);
var isaret = new GMarker(resimKoordinat,resim);
GEvent.addListener(isaret, "click", function() {
isaret.openInfoWindowHtml("<font color=red size=2>Buraya </font><font color=yellow size=2>farklı </font><font color=green size=2>renkte </font><font color=black size=2>yazılar yazılıp<br><a href='http://www.yesiltas.net' target='a'>linkler</a> koyulabiliyor :)</font>");
}
);
denemeHaritasi.setCenter(koordinat, 11);
denemeHaritasi.addOverlay(isaret);
}
}
//]]>
</script>
Bu bölüm, sayfa yüklenir yüklenmez çalışması planlanan bir fonksiyon barındırıyor ve harita bu fonsiyon sayesinde oluşacak.

---

Satır satır inceleyelim:
var denemeHaritasi = new GMap2(document.getElementById("haritaDiv"));
Bir harita objesi oluşturuyoruz. 'haritaDiv', html içinde yer alan div tagının id'sidir. Harita bu <div id='haritaDiv'></div> içinde oluşacaktır.

---

denemeHaritasi.addControl(new GSmallMapControl());
Haritanın sol üst köşesinde görünecek olan yön tuşları ve zoom tuşlarının oluşmasını sağlar. İstenirse bu satır çıkarılabilir.

---

var koordinat = new GLatLng(41.07314,29.039612);
Haritanın merkez noktasını belirtmek için bir koordinat objesi oluşturuyoruz. Bir GPS cihazıyla bulunduğunuz noktanın koordinatını öğrenebilirsiniz. Herhangi bir yerin koordinatlarını merak ediyorsanız Google Earth kullanarak tespit edebilirsiniz.

---

var resimKoordinat = new GLatLng(41.06554,29.009622);
Harita üzerine resim eklemek istiyorsanız, resimin görünmesini istediğiniz koordinat bilgisi ile bir koordinat objesi daha oluşturuyoruz, bu koordinat objelerini daha sonra kullanacağız. Eğere haritada resim kullanılmayacaksa bu satır çıkarılabilir.

---

var resim = new GIcon();
resim.image = "http://sezer.yesiltas.googlepages.com/ornek.png";
Harita üzerine eklenecek resim için bir resim objesi oluşturuyoruz.

---

resim.iconAnchor = new GPoint(6, 5);
Resim objesi, haritada verilen koordinatın ne kadar solunda(6 piksel) ve ne kadar üstünde (5 piksel) olacak.

---

resim.infoWindowAnchor = new GPoint(25, 2);
Resim tıklandığında açılacak bilgi penceresi resimin ne kadar solunda(25 piksel) ve ne kadar üstünde (2 piksel) olacak.

---

var isaret = new GMarker(resimKoordinat,resim);
Resimi haritaya yerleştirmek için bir işaretleyici objesi oluşturuyoruz. Bu objeye parametre olarak koordinat ve resim objesini veriyoruz.

---

GEvent.addListener(isaret, "click", function() {
isaret.openInfoWindowHtml("<font color=red size=2>Buraya </font><font color=yellow size=2>farklı </font><font color=green size=2>renkte </font><font color=black size=2>yazılar yazılıp<br><a href='http://www.yesiltas.net' target='a'>linkler</a> koyulabiliyor :)</font>");
}
);
Resim tıklatıldığında çalışacak olan fonksiyonu oluşturuyoruz. Çıkması istenen mesaj HTML formatında oluşturulabiliyor.

---

denemeHaritasi.setCenter(koordinat, 11);
Son olarak da haritanın merkez noktasını belirterek sayfada görünmesi sağlıyoruz. Daha önce tanımladığımız koordinat objesi burada birinci parametre olarak kullanılıyor. İkinci parametre ise haraitaya yapılacak zoom miktarı, bu rakam küçüldükçe harita detayı azalır.

---

denemeHaritasi.addOverlay(isaret);
Bu bölümde de daha önce tanımladığımız resim objesinin harita üzerine yerleşmesini sağlıyoruz..

---

<body onload="haritaGoster()" onunload="GUnload()">
<div id="haritaDiv" style="width: 300px; height: 400px"></div>
</body>
Bu bölüm artık HTML sayfamızın klasik body bölümü. Sayfa yüklenir yüklenmez haritamız yüklensin diye onload event?inde fonksiyonumuzu çağırıyoruz. Haritamızın çıkacağı bölüm ise id?si ?haritaDiv? olan bir div bloğu.

Bu bilgiler ile sınırsız sayıda işaret objesi tanımlayaıp istediğiniz kadar resim objesi tanımlayıp harta üzerine yerleştirmek mümkün.

Etiketler: Google, Internet, web

  ¶ Pazartesi, Temmuz 10, 2006