Personnaliser ses cartes Google Maps : les icones - Scripts

Navigation : Publications > Scripts

Google Maps propose une API permettant d'intégrer des cartes sur un site web, le webmaster à libre cours pour géocoder des adresses web, afficher des points et des services ... Google propose également une palette d'icones permettant d'afficher des épingles, pointant sur un lieu. Un peu de programmation permet d'afficher non pas les épingles de google, mais ses propres icones, ou image. Le projet qui suit le tour du monde à vélo de Jean Gabriel Chélala affiche ainsi une icone personnalisé communiquant bien mieux sur l'évènement qu'une anodine épingle, fusse t'elle rouge ou bleue. En utilisant le script avec des variables, ce sont les icones de son choix qui sont personnalisées, les autres restant anodines ou personnalisée mais différement. Du coté du code, nous avons la déclaration de l'icone :

var icon = new GIcon();
icon.image = "chemin vers l'image";
icon.iconSize = new GSize(60, 35);
icon.iconAnchor = new GPoint(18, 3);
icon.infoWindowAnchor = new GPoint(10, 1);

puis son utilisation :

var marker = createMarker(point, legende, my_icon);

sans oublier la fonction qui fait tout :

function createMarker(point, legende, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(legende);
});
return marker;
}

Coté démo, voyez l'Expédition 48 degrés Nord l'illustration de ce code source dans Etape du jour.

Commentaires Page 1/1

Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.

Commenter cet article