Google Map Api - Ders 5 - İşaretçi Eventleri ve Draggable işaretçiler

İşaretçiler üzerinde Event olaylarından bahsedeceğim. Ayrıca bu yazıda dinamik, hareket edebilen işaretçilerden de bahsedeceğim.

Bu özellik de apinin en çok kullanılan özelliklerinden birisi. İşaretçiler üzerinde yapılabilecek event işlemleri:

mousedown,mouseup,click,dragstart,drag,dragend.

Örneğin işaretçiye tıklandığında bir balon içerisinde bize bir mesaj yazılsın. Bunun için GEvent classının statik metodlarından yararlanıyoruz.

GEvent.addListener(busMarker, "click", function() {
// yapilacak islemler
// ...
// ...
}

Eğer işaretçi üzerine tıklarsanız yapılacak işlemler kısmındaki kod parçası çalışacaktır. Önceden dediğimiz gibi bir balon çıkmasını sağlayalım. Bunun için GMap2 classının openInfoWindowHtml metodundan yararlanacağız. Bu metodun parametrelerinin ilki GLatLng objesi, 2. si ise yazılacak mesaj.

var myHtml = <b>&quote Isareci uzerine tikladiniz... Bu bir html mesaji </b>&quote
var latlng = new GLatLng(41,29);
map.openInfoWindowHtml(latlng, myHtml);

Burada dikkat edilmesi gereken openInfoWindowHtml metoduna gönderilen latlang objesinin koordinatlarının marker ile aynı olması gerektiğidir. Eğer aynı olmaz ise siz işaretçiye tıklarsanız başka koordinat üzerinde bulut çıkabilir. Tabi bu yine size ve programınıza bağlı.

Tam bir örnek için : http://afsungur.googlepages.com/map_ornek_6.html

Draggable İşaretçiler
Bu işaretçiler önceden anlatılan statik işaretçiler gibi sabit bir şekilde yer almayabilirler. Kullanıcı isterse bu işaretçileri hareket ettirebilir. Bu hareket sayesinde harita üzerindeki bir çok farklı bölge üzerinde gezinebilir. Buraların koordinatları alınabilir, editlenebilir, veritabanına atılabilir vs. vs.. Bir çok şey yapılabilir. Bunun için ilk olarak işaretçimizin draggable olarak yani suruklenebilir olarak ayarlanmasi gerekiyor.

markeroptions = {draggable: true,icon: greenIcon };
busMarker = new GMarker(center,markeroptions);

şeklinde yeni draggable markerimizi oluşturabiliriz.

Peki draggable işaretçilerin ek özellikleri neler? Örneğin 3 yeni event listener draggable işaretçiler ile kullanılabiliyor.
dragstart,drag,dragend
dragstart -> sürükleme işlemi başladığı anda yapılacak işler
drag -> sürükleme esnasında yapılacak işler
dragend -> sürükleme bırakıldığında yapılacak işler için listener görevi görüyor.

yine GEvent classından yararlanıyoruz:

GEvent.addListener(busMarker,"dragstart",function() {
// surukleme basladiginda yapilacak isler
}

GEvent.addListener(busMarker,"drag",function() {
// surukleme devam ettiginde yapilacak isler
}

GEvent.addListener(busMarker,"dragend",function() {
// surukleme bittiginde yapilacak isler
}

Az sonra verecegim ornekte 2 isaretci olacak. Biri yesil, digeri mavi. Yesili hareket ettirdiginiz surece yesil isaretcinin koordinatlarını bir div bolgesinde goreceksiniz. Maviyi hareket ettirmeye basladiginiz ve suruklemeyi biraktiginiz anda belli bir div bölgesinde mesaj goreceksiniz.

Ornek 7 : http://afsungur.googlepages.com/map_ornek_7.html