Annuaire > 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 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 côté 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 Étape du jour.
Donnez votre avis