Google Maps ile çalışma
Selamlar arkadaşlar,
Bu yazımda google map ile neler yapabileceğimize ufaktan bir göz atacağız. Öncelik ile google map ile çalışma yapabilmek için google'a kayıt olmalı ve buradan giriş yapmalısınız. Giriş yaptıktan sonra açılan sayfada size hangi sitede kullanacağınızı sormaktadır. Kullanacağınız siteye göre google, yeni bir google api key dediğimiz bir key üretecektir.
Marker Ekleme
Marker ekleme bir noktayı belirtmek için kullanılmaktadır. Örneğin bir iş rehberi yapacaksınız ve haritada iş yerlerini nokta olarak göstermek istiyorsunuz. O zaman iş yerinin koordinatına marker eklememiz gerekmektedir. Örnek olarak aşağıdaki resimdeki gibi görüntü ortaya çıkacaktır.
Bir koordinatı ekranda göstermek için;
html kodumuz
<html> <head> <title>Google Uygulaması</title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAZckZM60zgACcrXtkrpdA_xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS7B825UY7KfVxsH_7RT1mKPUtjJA" type="text/javascript"></script> <script src="/document/js/googlemap.js" type="text/javascript"></script> </head> <body onLoad="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
Javascript kodumuz.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//Ekranda ortalanacak koordinat
map.setCenter(new GLatLng(37.76052011000952, 38.27514410018921), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_NORMAL_MAP);
//Markerin oluşturulacağı koordinat
var marker = new GMarker(new GLatLng(37.76052011000952, 38.27514410018921));
//Markerın açıklaması.
var html = "Adıyaman";
GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); });
map.addOverlay(marker);
marker.openInfoWindowHtml(html);
}
}
Marker Ekleme
Yukardaki vermiş olduğumuz örnek bir koordinatı ekranda markerlar ile gösterilmesiydi. Fakat bir iş rehberi yapıyorsanız ve kullanıcının kendi iş yerini kendisinin eklenmesini istiyorsanız kullanıcıdan koordinat bilgilerini istemek biraz abes kaçar. Onun için yapılması gereken harita açılır, kullanıcı haritadan iş yerini bulup marker ekleme yapar ve kaydeder. Arka planda koordinatlar alınıp veritabanına veya başka bir depolama birimine kaydedilir ve o firmanın haritadaki yerini göster dediğimizde ise yukarıdaki gibi haritada gösterim yapılır. Peki haritaya marker nasıl eklenir.
Ekleme işlemi sadece mouse eventten ibaret aslında. Haritanın mouse event olayına oluşturmuş olduğumuz bir formun içindeki hidden inputların değerlerini değiştiriyoruz. Örneğin;
HTML Kodlar
<html> <head> <title>Google Uygulaması</title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAZckZM60zgACcrXtkrpdA_xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS7B825UY7KfVxsH_7RT1mKPUtjJA" type="text/javascript"></script> <script src="/document/js/googlemap.js" type="text/javascript"></script> </head> <body onLoad="addmarkerload()"> <div id="map" style="width: 500px; height: 300px"></div> <form name="mapclick" action="/php/mapsave.php?islem=post" method="POST"><input type="hidden" name="coordinats"> <input type="hidden" name="MAPZOOM"> <input type="submit" value="Kaydet"> </form> </body> </html>
JS Kodları
function addmarkerload(){
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"));
//Haritanın ortalanacağı koordinatlar.
map.setCenter(new GLatLng(37.763539630638334, 38.27235460281372), 16);
//GSmallMapControl ile Yön ve Zoom tuşlarını ekliyoruz...
//GMapTypeControl ile Harita Tipini ekliyoruz...
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_NORMAL_MAP);
//Mouse'ın click eventına bağlı olarak, tıklanan noktanın koordinatlarını alıyoruz...
GEvent.addListener(map, 'click', function(marker, point) { if (marker) { map.removeOverlay(marker);} else {map.clearOverlays(); var marker = new GMarker(point); map.addOverlay(marker); document.mapclick.coordinats.value = point; document.mapclick.MAPZOOM.value = map.getZoom();}});
}
}
Unutulmaması gereken en önemli nokta en başta da vurguladığım gibi google api key alınmasıdır.Alınan google api key kodu ise aşağıdaki kodda buraya yazan bölüme eklenmelidir.
< script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=buraya" type="text/javascript">
20 Ocak 2011, 10:55
çok tşk ederim hocam çok yardımcı oldu emegine sagliık
14 Şubat 2011, 23:22
Üstadım Eline Koluna Bilgine Bileğine Sağlık :))))
Bi Çok Yerde Senin Kodu Alıntı Yapmışlar Onu Bile Becerememişler.
Çok Düzgün ve Açıklayıcı Anlatımın İçin Çok Çok Teşekkür Ederim.
08 Nisan 2011, 08:49
Hocam teşekkür ederim. Çok faydalı oldu.
13 Haziran 2011, 19:05
Hocam eyvallah çok işime yaradı yarım saattir aradım böyle açık ve net olanını daha görmedim. Eline koluna sağlık ;)
20 Haziran 2011, 09:28
Hocam marker ekleyebiliyoruz da ,eklediğimiz markerı silemiyoruz :) Acaba böyle bir özellik varmıdır?
21 Haziran 2011, 12:51
Selam Hakan, tabi ki mevcut. Akşam müsait olursam yeni bir yazıda anlatırım.
26 Haziran 2011, 15:21
çok işime yaradı, teşekkürler..