Projet Webmaster PHP

Portail Php


Personnaliser ses cartes Google Maps : les icones


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 icônes, ou image.

Le projet qui suit le tour du monde à vélo de Jean Gabriel Chelala affiche ainsi une icône personnalisée 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 icônes de son choix qui sont personnalisées, les autres restant anodines ou personnalisées mais différemment.

Du coté du code, nous avons la déclaration de l'icône :

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 avec l'Expédition 48 degrés Nord l'illustration de ce code source dans Etape du jour.