Google Maps API : un marqueur déplaçable
Posté par david le 8 Juillet, 2007 - 18:02.
Ingénierie web | JavaScript | Web 2.0
Ce cinqième billet sur l'API Google Maps vous apprendra à créer un marqueur déplaçable par simple glisser/déposer (drag and drop).
Partons de l'exemple 5 du billet précédent dont nous allons simplement modifier la fonction de création de marqueur createMarker :
function createMarker(point,html) {
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://www.numabilis.com/files/demos/google-maps/blue-dot.png";
var options = {
icon: icon,
draggable: true
};
var marker = new GMarker(point, options);
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(html);
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Le marqueur est donc construit en passant des options au constructeur : l'URL (absolue) d'une icône (pour différencier le marqueur déplaçable des autres) et un simple booléen indiquant que le marqueur est déplaçable ! Il est également possible, comme dans cet exemple de définir des fonctions appelées au début et à la fin du déplacement.
Le résultat est visible sur l'exemple 6.
Les autres billets de cette série sur l'API Google Maps :
- API Google Maps : premières cartes
- Google Maps API : marqueurs et fenêtres d'informations
- Google Maps API : affichage des données d'un fichier JSON
- Google Maps API : géolocalisation (geocoding)
- Google Maps API : un marqueur déplaçable
- Google Maps API : coordonnées d'un marqueur
- Google Maps API : gestionnaire de marqueurs
- Google Maps API : gestionnaire automatique de marqueurs
