Personnaliser ses cartes Google Maps : les icones

Navigation:

  1. Pages Webmaster
  2.  > 
  3. Scripts


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.


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.



Article écrit par Webmaster le 20/03/2008
(Hits 11611
- Catégorie : Scripts)

Faites passer - Imprimer

Commentaires

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


Autres publications Scripts

Script de lecture de pages web et d'aide à la décision
Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.
(écrit le 12/10/2016 - 5.596 lectures)

Script de contrôle de page web selon la résolution, le navigateur
Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.
(écrit le 14/09/2016 - 2.267 lectures)

Site web adapté à la taille de l'écran
Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).
(écrit le 06/03/2014 - 7.109 lectures)

Placeholder sous IE
L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.
(écrit le 24/01/2014 - 4.757 lectures)

Rendre ses scripts asynchrones pour optimiser le chargement de pages web
En plus d'un bon placement de scripts dans la page, il est possible d'accélérer le chargement d'une page en gérant ses scripts de manière asynchrone.
(écrit le 23/05/2012 - 5.348 lectures)

Twitter et les raccourcis d'url
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.
(écrit le 22/09/2010 - 4.512 lectures)

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

Script pour lecteur vidéo embarqué
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.
(écrit le 04/04/2009 - 5.668 lectures)

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

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

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



Tutoriels Webmaster

Référencement :

Comment Google Analytics et la Search console Google fonctionnent. Quelle est la différence entre ces outils ? Est ce qu'ils interagissent entre eux ?


Scripts :

Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.


Scripts :

Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Conception :

Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.


Outils :

Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.


Scripts :

Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).


Scripts :

L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.


Sécurité :

Poster un spam sur un forum est pour certains acteurs du web un exercice amusant. Pour d'autres c'est un moment de réflexion obligatoire pour éviter de se faire spammer.
Voyons quelles sont les solutions pour éliminer les posts des spameurs tout en gardant ceux des internautes.


Pages webmaster
Actu Webmaster

Thèmes Phortail