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.htmlBundan sonrası Google’ın sayfalarında ayrıntılı olarak anlatılmış:
http://www.google.com/apis/maps/documentation/

Örnek haritanın kodu ise şö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=ISO-8859-9″/>
<title>Örnek Google Haritası</title>
<script
src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAE7oo8KaknWWETXnKzOqhnRSghx6uyneHtZIHVxL8UFhzX-BGRxRGcjuVfNM_uaRb5y7oUVrdPWdILw”
type=”text/javascript”>
</script>

<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>
</head>

<body onload=”haritaGoster()” onunload=”GUnload()”>
<div id=”haritaDiv” style=”width: 300px; height: 400px”></div>
</body>
</html>

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.

Alıntı : yesiltas.net

Yorum Yaz

You must be logged in to post a comment.