Personnaliser les marqueurs Google Maps

marqueurMapArticle

Très utiles dans de nombreux domaines, l’utilisation la plus fréquente des maps sur Internet est la localisation d’une société ou d’un point de vente. Grâce aux technologies de cartographie actuelles, la précision des cartes est très fine et les fonctionnalités qu’elles permettent sont nombreuses et puissantes.

Du fait de l’étendue des possibilités que permettent les services de webmapping, leur utilisation et leur customisation feront l’objet de plusieurs articles sur le blog de Netmacom.

Aujourd’hui, nous allons commencer doucement, avec une fonctionnalité très simple, la personnalisation des marqueurs. En suivant les quelques exemples et explications donnés dans ce billet, vous serez en mesure de créer une carte comme celle que nous avons mis en place sur notre page de contact.

Voir la Démo

Les différents services de webmapping (SIG)

Avant de commencer, je tiens à signaler qu’il existe plusieurs services de webmapping. Sur Netmacom, nous utilisons Google Maps et c’est donc celui-ci qui fera l’objet de la plupart de nos articles sur les cartes géographiques en ligne. De plus, l’API de Google Maps a évolué depuis sa création et il en existe plusieurs versions. Sur Netmacom, nous utilisons la dernière, à savoir l’API v3.

Toutefois, voici une liste des principaux services existants :

  • Google Maps
  • Yahoo Maps
  • Bing Maps
  • Open Street Map

Insérer une carte Google Maps dans une page web

Ajouter une carte Google sur son site n’est pas très complexe en soit, mais cela nécessite tout de même de connaître un minimum le HTML et le JavaScript, ainsi que de s’inscrire sur Google APIs afin de récupérer une clé d’utilisation.

Obtenir un accès à Google APIs

L’utilisation d’une carte Google est soumise à des conditions. L’une d’elles est de posséder un compte sur les outils de Google, ce qui vous permettra d’obtenir une clé. Cette clé est à renseigner dans votre code JavaScript, sans quoi la carte ne s’affichera pas. Pour commencer, rendez-vous sur le site Google APIs et connectez-vous avec votre compte Google (GMail). Si vous n’en avez pas, ce qui est peu probable si vous travaillez sur le web, il faut en créer un.

Une fois que vous avez accès à l’interface, vous devez activer le service Google Maps API v3 en vous rendant dans l’onglet “Services”, et en switchant le bouton correspondant sur “ON”.

Google Maps API v3 ON

Une fois que vous activé votre accès, il ne vous reste plus qu’à récupérer votre clé en passant par l’onglet “API Access”. Votre clé (API Key) se situe en bas de page.

Simple API Key

C’est bon, vous avez maintenant votre clé d’accès à l’API de Google Maps. Conservez-la quelque part, on ne va pas tarder à s’en servir.

Ajouter une carte

La création d’une carte simple se découpe en trois parties :

  • L’insertion de la div de réception de la carte. Généralement on lui attribue l’ID “map”.
  • La configuration de la carte via le JavaScript.
  • Le déclenchement de la création de la carte, en différé du chargement de la page, via un évènement JavaScript ou l’attribut “onload” de la balise body.

La partie la plus complexe est la configuration de la carte, soit le JavaScript. Dans l’exemple ci-dessus, la fonction _init() insère le script de Google dans la page, puis une fois terminée, appelle la fonction _initMap(), qui crée la carte avec les options définies. La clé que nous avons récupérée plus haut est à insérer dans la première fonction, à la place de “{{API_KEY}}”.

Configurer une carte

La configuration de la carte se situe dans la deuxième fonction. Dans l’exemple, peu d’options sont définies :

  • Le niveau de zoom par défaut.
  • Le centre de la carte (quelque part sur Paris) via une position géographique, un couple (latitude, longitude).
  • Le type de carte, ici une carte routière type GPS.

Ces quelques options suffisent pour créer une carte basique, mais il en existe d’autres qui permettent de créer des cartes plus évoluées. D’ailleurs, chaque option peut prendre plusieurs valeurs, ce qui crée différents comportements. Le type de carte notamment peut prendre les valeurs suivantes :

  • ROADMAP : carte routière (vue par défaut)
  • SATELLITE : images satellites issues de Google Earth
  • HYBRID : mélange entre la vue par défaut et la vue satellite.
  • TERRAIN : carte physique permettant de discerner les reliefs, un peu comme les cartes scolaires.

Pour en savoir plus sur les options des maps, rendez-vous ici.

Customiser ses marqueurs Google Maps

Maintenant que la carte est fonctionnelle, nous allons y insérer des marqueurs de lieux.

Généralement lorsque l’on affiche une carte sur un site, c’est pour y définir des zones ou des lieux, que l’on souhaite mettre en avant pour les internautes. Dans cette partie, nous allons donc voir comment insérer un marqueur et comment définir quelques propriétés personnalisées telles que son image, son ombre ou encore sa popin d’information.

Insérer un marqueur

L’insertion d’un marqueur est très simple. Si vous avez compris le principe de l’insertion d’une map, alors vous n’aurez pas de difficulté.

Si l’on place le code suivant sur la page d’exemple, nous aurons un marqueur au centre de la carte, affichant “Hello World !” au survol du curseur. Rien de bien sorcier non ?

Modifier l’image des marqueurs

Par défaut, les marqueurs Google Maps se présentent sous la forme d’une icône rouge plutôt simple et peu esthétique. Il suffit d’observer l’exemple précédent pour s’en rendre compte. Personnaliser cette image en l’adaptant à votre charte graphique peut ajouter un plus graphiquement parlant. Cette modification peut également être faite dans le cadre d’un marquage de plusieurs types de lieux. Par exemple, si l’on souhaite différencier le siège social des boutiques d’une entreprise. On utilisera alors deux types de marqueurs.

Dans cet exemple, on réutilise le code d’insertion de marker précédent, en ajoutant simplement un paramètre icon, faisant référence à une image que l’on a définie au préalable.

Modifier l’ombre des marqueurs

Vous ne l’avez peut-être jamais remarqué, mais les marqueurs possèdent des ombres. Tout comme pour l’icône, il en existe une par défaut. Dans le cas où vous créez votre propre icône, il est important de créer l’ombre qui va avec. Sinon le rendu peut être inadapté.

La modification de l’ombre d’un marqueur est sensiblement identique à la modification de l’icône. On utilise ici le paramètre shadow.

Définir la zone cliquable des marqueurs

Par défaut, lorsque l’on crée un marqueur personnalisé, sa zone cliquable correspond à un rectangle dont les côtés sont calculés en fonction de la hauteur et la largeur de l’image définie. Si je prends une fois de plus l’exemple du drapeau, cela peut s’avérer gênant de déclencher un évènement au clic sur une zone rectangulaire alors que votre drapeau ne la remplit pas complètement (PNG transparent). Pour éviter ce phénomène, il est possible de définir une zone cliquable. Pour ce faire, il faut spécifier une liste de positions au sein de l’image.

Pour en savoir plus sur la personnalisation avancée des marqueurs, consultez le chapitre complex icons de la documentation.

Créer une interaction lors du clic sur un marqueur

Placer des marqueurs un peu partout sur une carte c’est bien, mais les rendre interactifs c’est encore mieux. Un exemple classique est une liste de boutiques ou de franchises éparpillées aux quatre coins de la France, représentées par des marqueurs permettant d’obtenir les horaires d’ouverture lors du clic. Avec un tel système, on donne à la fois les informations de localisation et d’ouverture. Sympa non ?

A partir de l’exemple ci-dessus, il est possible de réaliser un tas de choses. On peut par exemple centrer la carte sur le marqueur lors du clic sur celui-ci, déployer une div sur la page contenant un formulaire de contact avec un point de vente, … C’est à vous d’imaginer ce que vous souhaitez en faire.

L’utilisation basique est de créer un popin d’information avec un message personnalisé.

Démonstration

Voici une démonstration simpliste affichant quelque marqueurs personnalisés avec une interaction basique permettant de centrer la carte au clic. En bonus, deux boutons permettant d’afficher/cacher les marqueurs. Je vous invite à consulter le code source si vous souhaitez mettre en place la même fonctionnalité.

Personnaliser les marqueurs Google Maps, 3.0 out of 5 based on 2 ratings

Commentaires

#1
Inter-assistance

Super tutoriel ! J’en cherchais un pour mettre en place une map au niveau de mon site. Merci.

#2
Paul

C’est vrai que c’est sympa de pouvoir utiliser des marqueurs qu’on est pas habitué à voir habituellement. Je vais faire un essai sur un de mes sites, j’espère que je vais m’en sortir sans trop de problèmes parce que je suis pas des plus doués non plus lol.

#3
Fabinho

Bonjour,

j’ai essayé de placer un bouton, mais quand il faut entrer l’url de l’image, je ne comprends pas trop comment faire…

j’ai une image dans mon pc, et également sur mon site, donc sur mon hébergeur/serveur…

Mais je ne sais pas cmt l’incruster dans le code html…

Si quelqu’un sait m’aider!

merci :-)

Morgan Fabre

Bonsoir,

Si votre image est hébergée à l’adresse “http://netmacom.fr/wp-content/uploads/exemples/google-maps/images/marker_blue.png”, alors il suffit d’ajouter cette URL de la façon suivante :

var image = {
url: ‘http://netmacom.fr/wp-content/uploads/exemples/google-maps/images/marker_blue.png’,
… // Reste du code source
};

#4
Kévin Pinto

Attention : Depuis le passage à la version 3.14 l’API ignore l’élément : shadow.

#5
Kev

Comment fais t on pour ajouter un marqueur depuis une géolocalistation? c’est a dire que on peut crée un marqueur depuis un bouton crée.

Réagissez à cet article

Données obligatoires