Bu yazımda Google Maps haritası üzerine işaretçi koymayı anlatmaya çalışacağım. Koordinatı bilenen bir noktaya veya mouse click ya da double click eventi ile harita üzerine herhangi bir noktaya marker denilen bu işaretçiler konulabilir. Öncelikle yerleştireceğimiz noktanın kooordinatının bilindiğini varsayarak örnek yapalım :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var EnlemBoylam = new google.maps.LatLng(38.75408327579141, 36.38671875); var HaritaOzellikleri = { zoom: 4, center: EnlemBoylam, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById("map_canvas"), HaritaOzellikleri); var marker = new google.maps.Marker({ position: EnlemBoylam, title:"Selam" }); // Harita üzerine marker ekleniyor ve ortalanarak ekrana getiriliyor. marker.setMap(map); |
Yukarıda geçenleri daha önceki yazılarımda açıklamıştım. Var marker değişkeni ile yeni bir tane işaretçi oluşturuyor ve daha önceden tanımladığım koordinatlara konumlandırıyoruz. Ve üzerine geldiğimizde etiketinde selam yazacak.(Üzerine tıkladığımızda herhangi bir bilgi penceresi açılmayacak, ileride bu konudan bahsedeceğim.
Google Maps Api ile ikinci marker yerleştirme örneğimizde de harita üzerinde tıkladığımız yere marker konulmasını sağlayalım. Bu işlem için aşağıdaki eklentileri javascrip te ekliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var map; var markersArray = []; function load() { var EnlemBoylam = new google.maps.LatLng(38.75408327579141, 36.38671875); var HaritaOzellikleri = { zoom: 10, center: EnlemBoylam, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), HaritaOzellikleri); google.maps.event.addListener(map, 'click', function (event) { addMarker(event.latLng); }); } function addMarker(location) { marker = new google.maps.Marker({ position: location, map: map }); markersArray.push(marker); } |
Böylece tıkladığımız her yere bir marker koyabiliyoruz. Son olarak Google Maps üzerine koyduğumuz markerlara tıkladığımzda bilgi penceresinin açılmasını ve bu bilgi pencere içerisinde bir yazının görünmesi istiyorsak aşağıdaki eklentileri kodumuz ekliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var map; var markersArray = []; function load() { var EnlemBoylam = new google.maps.LatLng(38.75408327579141, 36.38671875); var HaritaOzellikleri = { zoom: 10, center: EnlemBoylam, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), HaritaOzellikleri); google.maps.event.addListener(map, 'click', function (event) { addMarker(event.latLng); var bilgi = "Memleketin her yeri bir başka güzel"; var infowindow = new google.maps.InfoWindow({ content: bilgi }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); }); } function addMarker(location) { marker = new google.maps.Marker({ position: location, map: map }); markersArray.push(marker); } |
Bu yazıyı burada noktalıyorum. Bir sonra ki yazımda marker ve info penceresi özelliklerine değinmeyi düşünüyorum.
Kolay gelsin…
