Il mondo delle Google Maps è veramente ampio e completo, tantissime sono le funzioni e le opzioni possibili offerte da questo servizio, giunto alla versione 3, una delle ulteriori possibilità offerte dalle mappe di google agli sviluppatori, è quella di poter rendere trascinabile (draggable) il segnaposto (marker) e di aggiungere a questa azione eventi all'interno della mappa che ci consentono in tal modo di ampliarne il comportamento. Attivare il trascinamento del marker in google maps è davvero semplice, basta agire su una proprietà dell'oggetto marker, andiamo a scoprire come fare.
Riferendoci alla Versione 3 delle API di Google Maps, per consentire al marker di essere trascinabile, basta settare la proprietà di quest'ultimo "draggable" a true:
draggable: true
Quindi per la creazione delle opzioni e della mappa, e successivamente della creazione ed aggiunta del marker alla mappa, andremo ad esempio a scrivere così:
var mapOptions = { zoom: 14, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({ position: results[0].geometry.location, draggable: true, map: map, title: address });
Come vedete, nell'ultima riga di codice, il marker è stato creato con l'opzione "draggable: true", di default tale opzione è false.
Allo stesso modo degli esempi degli articoli precedenti, possiamo aggiungere alla mappa gli eventi inerenti il trascinamento del segnaposto, più precisamente riguardano:, inizio trascinamento (dragstart), durante il trascinamento (drag) e al ternime del trascinamento (dragend), inoltre vi è anche l'evento draggable_changed che si attiva non appeva cambia la proprietà draggable del marker.
Quindi, supponendo di voler gestire gli eventi d'inizio e fine trascinamento del segnaposto (magari per cambiare le coordinate, latitudine e longitudine in delle box), al listener della nostra google maps aggiungeremo gli eventi in questo modo:
google.maps.event.addListener(marker, "dragstart", doSomething1() { ... } );
google.maps.event.addListener(marker, "dragend", doSomething2() { ... } );
quindi allo scatenarsi dell'evento draggable, cioè quando si comincia a trascinare il marker (dragstart) e quando lo si rilascia (dragend), rispettivamente verrà eseguito il codice Javascript all'interno delle funzioni doSomething1 e 2, semplice no!
Per chi volesse studiare o approfondire le Google Map, eccovi il link da cui partire:
Google Maps Javascript API V3 Reference
Chiunque voglia aggiungere qualcosa, chiedere chiarimenti, su "Come rendere trascinabile (draggable) i marcatori (markers) in Google Maps" può farlo tramite i commenti.