[GoogleMAP API] Personnaliser un marqueur

Ce petit bout de code permet de créer des marqueurs sur les Google MAP personnalisés (avec des icônes personnalisés) et draggable, c'est à dire qui peuvent être déplacés.

// On fabrique un objet icône
var icon = new GIcon();
// On indique l'emplacement de l'icône
icon.image = 'mon-icone.png';
// On indique la taille de l'icône
icon.iconSize = new GSize(21, 21);
// On indique le point d'encrage de l'icône, c'est à dire le point
// dans l'image qui indiquera la position du marqueur sur la carte.
// Ici on choisi un point en bas au milieu de l'icône.
icon.iconAnchor = new GPoint(11, 21);
// On indique le point d'encrage de la fenêtre d'information
icon.infoWindowAnchor = new GPoint(18, 1);

// Dans la variable d'option, on précise l'icône de marqueur
// et que le marqueur est déplaçable (draggable)
var options = {
icon: icon,
draggable: true
};

// On fabrique un nouveau marqueur, ici la variable point est
// un GLatLng qui doit être précédemment initialisé
var marker = new GMarker(point, options);

// On active une seconde fois le comportement
// déplaçable (draggable)
marker.enableDragging();

// La callback sera appelée au début du déplacement (drag)
GEvent.addListener(marker, "dragstart", function() {
});

// La callback sera appelée à la fin du déplacement (drag)
GEvent.addListener(marker, "dragend", function() {
});

Google MAP, marker drag events, customize marker icon, personnaliser un marqueur, change l'icône d'un marqueur, événements du déplacement d'un marqueur, drag/drop, GIcon, GEvent, GMarker


About the Author

Ted Marklor est un web designer, un web developer et un génie de la nature. Transcendant le web depuis bientôt 15 ans, Ted est une source d’inspiration et de conseil pour toute une génération de jeunes programmeurs. Le Web 2.0, c’est lui. Dans la vie, il aime aussi faire des avions en papier, s’inventer des pseudonymes et une vie de winner, et surtout parler de lui à la troisième personne. Ça se fait en ce moment sur les blogs…


Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.