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:
<!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>
<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.
Temmuz 14th, 2006 at 6:31 am
Sizi tebrik ederim. Özellikle Google map in sitemde nasıl kullanacagımı acıklayan yazınız doyurucu idi. Teşekkürler.
Mayıs 9th, 2007 at 12:06 pm
çok güzel bir yazı. teşekkürler. yalnız şöyle bir problem olduğunu gördüm. harita üzerinde konulan küçük resim, firefox tarayacıda gözükürken, internet explorer da gözükmüyor. bunun nedenini anlayamadım. bu konuda bir fikriniz var mı?
Atakan AKYÜZ
aakyuz@esisbilisim.com
Mayıs 9th, 2007 at 6:24 pm
Atakan selam, ilginç bir şey tespit etmişsin, bu sorun için resmin .png olmasından şüphelendim ama .gif deneyince de ie6′da resmi göremedim.
Haziran 8th, 2007 at 12:35 pm
Selam,
Bu örnekteki gibi GIcon() class’ından türettiğiniz objenin “iconSize” (ve “shadowSize”) property’sini tanımlamazsanız, genellikle (her zaman değil) icon ie’de görünmüyor.
Örnek;
http://madyalman.googlepages.com/pmap.html
Google yine sıralama algoritmasını değiştirmiş sanırım. Yazı eski bir yazı ama Google’da üst sıralara çıkmış, o yüzden cevap yazdım =)
Haziran 25th, 2007 at 12:41 am
merhaba
bu apileri kullanarak ve koordinat vermeden kullanma imkanımız var mı ? biliyor musunuz ?
Haziran 30th, 2007 at 6:38 pm
Bu örnekte Google Map apiyi haritanın üzerine resim eklemek için kullanıyoruz, resimi haritada nereye ekleyeceksiniz o bölgenin koordinatını bilmeniz gerekir.
Aralık 7th, 2007 at 2:31 pm
Selamlar eskı bı yazı ama belkı bı cvb gelır..
arkadaslar bu map dakı yol tarıfı hakkında bı bılgınız varmı. mesela ben 2 nokta belırtıp bu noktalar arasındakı yolu farklı renkte gosterecem..bunu nasıl yapabılırımm
mesela map uzerınde abd nın herhangı bı yerınde sag tıklayıp yol tarıfı al gıbı.. malum tr de olmuyo bu..
Haziran 27th, 2009 at 1:56 am
Teşekkürler bilgi için yararlı şeyler var ama bunun daha kolay bir şekli yokmu hocam
Ağustos 27th, 2009 at 1:05 pm
Teşekkürler paylaşım için ama bnm istediğim tam olarak bu değil.
bi input olsun içine adres yazıldıkça o adresi göstersin yani google mapsin aynısını istiyorum javascriple bilgisi olan varsa paylaşsın lütfen…
ozilhan_hulya@hotmail.com
yardımcı olmak isteyenler eklesin sadece
Eylül 3rd, 2009 at 2:21 pm
slm aleyküm hocam bende sitemi haritya eklemek istiyorumda yardımcı olabilirmsiniz acaba saygılarla.
oftaş evden eve nakliyat
0216 573 38 40
Eylül 3rd, 2009 at 2:36 pm
selam aleyküm hocam bende sitemi haritaya koymak istiyorumda siz bana yardımcı olumusunuz.acaba saygılar
http://www.oftasnakliyat.
feyyaz
Ekim 17th, 2009 at 8:21 am
xxxx
Ekim 17th, 2009 at 8:22 am
Google Map Kullanarak işyerinizin adresini, apartmanınızıda belırlıyorsunz
http://googlemapkayit.google.com
burada anlatımı yapılmıs
Ekim 17th, 2009 at 8:23 am
Google Map Kullanarak işyerinizin adresini, apartmanınızıda belırlıyorsunz
http://googlemapkayit.blogcu.com
burada anlatımı yapılmıs