Utilisation de Google Maps

Social Bookmarking

Écrit par Nicolas PIED

Publié le 05-09-2006 - 13178 hits

Index de l'article
1 - Utilisation de Google Maps 2 - Votre première application Google Maps 3 - Les « info-bulles » Google Maps 4 - Afficher des marqueurs 5 - Attacher des évènements JavaScript 6 - Des onglets dans les « info-bulles » 7 - « Drag and Drop » des marqueurs 8 - Rechercher une adresse postale 9 - Conclusion

Déplacer les marqueurs Google Maps à la souris

L’exemple ci-dessous propose de déplacer un marqueur à l’aide de la souris en utilisant la technique dites « drag & drop ». Pour cela, il est nécessaire d’indiquer au marqueur dans un premier temps que celui-ci à la possibilité d’être déplacer : d’où le « {draggable: true} » en second paramètres du constructeur « GMarker ».

Ensuite, mais cela reste facultatif, il est possible d’attacher des « listeners » qui vont intervenir lors des différents évènements engendrés par le déplacement du marqueur. Dans notre cas, seuls les évènements « dragstart » et « dragend » seront pris en compte.

/* Création du marqueur attaché au point
 * Le marqueur est ici déplaçable à l'aide de la souris
 */
var marker = new GMarker(point, {draggable: true});
 
/* Lorsque son déplacement commence, on ferme l'info-bulle */
GEvent.addListener(marker, "dragstart", function() {
    map.closeInfoWindow();
});
 
/* Lorsque son déplacement se termine, on affiche l'info-bulle */
GEvent.addListener(marker, "dragend", function() {
    marker.openInfoWindowHtml("Bien joué !");
});