Personnaliser ses cartes Google Maps : les icones

Navigation: Pages Webmaster > 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 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.

Commentaires

Autres publications Scripts

Twitter et les raccourcis d'url
(Ecrit le 22/09/2010 - 2.649 lectures)
Septembre 2010 voit les nouveaux raccourcis d'url se mettre peu à peu en place avec la nouvelle version de twitter. Quels sont alors les impacts sur le développement des pages vis à vis de l'API Twitter.

Interdire le clic droit
(Ecrit le 17/02/2010 - 14.310 lectures)
Empêcher la copie d'images, mais cela seulement en évitant d'utiliser des instructions restrictives.

Script pour lecteur vidéo embarqué
(Ecrit le 04/04/2009 - 3.761 lectures)
Lorsque l'on intègre sur un site web les lignes de code proposées par les sites de plateforme vidéo, le code n'est pas valide selon la syntaxe du W3C. voici donc un code correct.

Personnaliser ses cartes Google Maps : les icones
(Ecrit le 20/03/2008 - 8.272 lectures)
Les icônes google maps sont personnalisables, pour des cartes intégrées dans un site web et qui communiquent ainsi d'avantage. Ce code source est utilisable.

Syndication et portail web
(Ecrit le 18/08/2005 - 4.687 lectures)
La Syndication thématisée diffuse l'information dans le portail web et puisque le portail est dynamique, l'implémentation des flux est un jeu d'enfant. Le cas pratique de l'annuaire thématique.

CMS Gestion de contenu
(Ecrit le 15/02/2004 - 6.121 lectures)
La gestion de contenu, ou la Publication Assistée par Internet avec un CMS (Système de gestion de contenu)

Pages statiques ou pages dynamiques
(Ecrit le 15/10/2003 - 5.489 lectures)
Sites web avec Pages statiques ou pages dynamiques, comment ne pas confondre les deux !

Optimiser son code source
(Ecrit le 19/06/2003 - 5.558 lectures)
Peu d'outils web permettent cette option de manière intrinsèque et pourtant il est possible voire conseillé d'optimiser son code source.

Suivez phortail

Web phortail.org

• Certification ISTQB
• Qualité logicielle
• Cahier des charges fonctionnel détaillé
• Emploi de Test manager en Recette informatique
• Emploi de Test Analyst en Recette informatique