Rendere trascinabile (draggable) un marker sulla Google Maps

Giorgio Borelli

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.

Categorie: Google | Javascript

Tags: , ,

Pingbacks and trackbacks (1)+

Aggiungi Commento

biuquote
  • Commento
  • Anteprima
Loading