Comment créer une carte Google Maps personnalisée pour son site ?


Il peut être très pratique de créer une carte Google Maps pour son site. Vous pouvez utiliser la fonctionnalité pour un usage ponctuel (montrer l’adresse de votre entreprise) ou pour un usage récurrent : partager des itinéraires sur un blog voyage, l’adresse d’un lieu, créer une carte des pays que vous avez visités ou de vos envies voyage, les possibilités sont multiples !

Dans cet article, je vais vous montrer à quel endroit vous pouvez créer une carte Google Maps toute simple à intégrer sur votre site (solution qui fonctionne sur WordPress, Blogger et de nombreuses autres plateformes)… mais je vais aussi vous présenter un plugin WordPress très pratique pour ceux qui ont besoin d’utiliser davantage les cartes : il permet de créer des cartes cliquables, avec des couleurs…

Ligne décorative

Quel prix pour créer une carte Google Maps pour son site ?

Google Maps a surpris tout le monde en annonçant en 2018 que le service devenait payant. Certains utilisateurs ont été invités à renseigner leurs coordonnées bancaires pour pouvoir continuer à utiliser les cartes.

Que se passe-t-il exactement ? Déjà, sachez que l’utilisation de l’application Google Maps ou du service en ligne Google Maps reste gratuite.

De même, l’intégration toute simple d’une carte sur un site (via ce qu’on appelle un « embed », c’est-à-dire une simple intégration de la carte Google Maps) reste elle aussi gratuite. Idem pour la création d’une carte personnalisée sur Google Maps à l’aide du service « My Maps » de Google : gratuit aussi.

Ce qui devient payant est le recours aux API Google Maps, qui permettent de construire des cartes plus élaborées (par exemple, intégrant Street View, la recherche d’itinéraires, etc) ou d’intégrer Google Maps au sein d’un projet plus vaste (comme le fait le jeu très amusant GeoGuessr basé sur Google Street View, où vous devez deviner dans quelle partie du monde vous vous trouvez en vous basant sur ce que vous voyez sur Street View).

Dans ce cas, Google Maps vous offre un certain nombre de chargements gratuits de l’API mais au-delà, vous devez payer selon un tableau de tarifs assez détaillé.

C’est un changement important pour beaucoup d’entreprises habituées à utiliser le service gratuitement (ou presque) à moins d’avoir un volume de trafic gigantesque… mais rassurez-vous, les solutions que je vais vous proposer dans l’article pour créer une carte Google Maps pour son site n’impliquent pas de payer cet accès !

Créer une carte personnalisée sur Google Maps

Comment créer une carte simple, pour montrer une adresse unique par exemple ou un petit itinéraire ? Vous pouvez utiliser le service « My Maps » de Google.

Quand vous êtes connecté à My Maps depuis un compte Google, vous voyez un aperçu de vos cartes existantes (celles que vous avez créées, que l’on a partagées avec vous…) et un bouton « Créer une carte ».

Créer une carte personnalisée sur Google Maps pour son site
Créer une carte personnalisée sur Google Maps pour son site

Le principe est très simple : cliquez sur « Carte sans titre » pour donner un nom à votre carte.

Renommer une carte personnalisée sur Google Maps
Renommer une carte personnalisée sur Google Maps

Ajouter des éléments à sa carte personnalisée

Ensuite, le fonctionnement d’une carte est simple : vous pouvez y créer différents « calques », c’est-à-dire des ensembles de lieux. Par exemple, on pourrait sur une même carte imaginer un calque avec toutes vos bonnes adresses de restaurants, un calque avec vos bonnes adresses de lieux à visiter, un calque avec vos bonnes adresses d’hébergement.

Quand vous créez une nouvelle carte personnalisée sur Google Maps, Google a déjà créé pour vous un calque intitulé « Calque sans titre » (vous pouvez le renommer en cliquant sur le titre).

Vous pouvez ajouter des calques à votre convenance, ça permet ensuite aux visiteurs de votre site de les cocher/décocher pour afficher/masquer les éléments. Par exemple, sur ma carte de la ville de York en Angleterre, j’ai justement un calque avec les lieux à visiter et un calque avec les restaurants/bars sympa, ce qui permet à chacun de choisir ce qu’il veut afficher pour une meilleure lisibilité.

Carte Google Maps personnalisée
Carte Google Maps personnalisée

Ensuite, pour ajouter une adresse à un calque, entrez simplement le lieu dans la barre de recherche. Par exemple, pour ajouter la ville de Budapest à ma carte, je tape simplement « Budapest » et je sélectionne la ville parmi les propositions.

Ajouter un lieu à une carte Google Maps
Ajouter un lieu à une carte Google Maps

Ça crée un petit marqueur coloré sur le calque et si vous cliquez sur « + » à côté de ce marqueur, ça ajoute le point à votre carte.

Marqueur sur une carte Google Maps
Marqueur sur une carte Google Maps

Par défaut, le marqueur est banal et bleu. En cliquant dessus, vous pouvez personnaliser l’apparence du marqueur et sa couleur grâce à l’icône « pot de peinture » :

Personnaliser un marqueur Google Maps
Personnaliser un marqueur Google Maps

Vous pouvez aussi entrer une description personnalisée pour chaque point de votre carte. Si vous y incluez un lien, ce lien est cliquable, pratique pour un blog !

Description personnalisée d'un marqueur
Description personnalisée d’un marqueur

Partager la carte Google Maps sur son site

Une fois que votre carte est terminée, il est très simple de la partager sur votre blog. Cliquez sur le bouton « Partager ».

Partager une carte Google Maps
Partager une carte Google Maps

Dans la partie « Qui a accès », modifiez la ligne « Privé » pour remplacer par « Activé – Public », qui permet à votre carte d’être consultée par n’importe qui.

Accès à la carte personnalisée
Accès à la carte personnalisée

Une fois que c’est fait, cliquez sur les trois petits points à côté du nom de la carte et sur « Intégrer la carte à mon site ».

Intégrer la carte à son site
Intégrer la carte à son site

Vous obtenez un code HTML d’iframe qu’il suffit de copier-coller sur votre blog à l’endroit où vous souhaitez insérer la carte (en utilisant l’éditeur HTML pour avoir le droit d’insérer du code !).

Si vous souhaitez modifier les dimensions par défaut de la carte Google Maps personnalisée, c’est possible. Repérez la partie du code qui comporte ces informations :
width="640" height="480"

Remplacez 640 par la largeur de votre choix en pixels et 480 par la hauteur de votre choix en pixels.

Cette solution peut fonctionner sur n’importe quelle plateforme de blogging où vous pouvez coller du code HTML : WordPress, Blogger, etc.

Mais comment faire pour générer des cartes colorées, mettant en avant certains pays, en les rendant cliquables pour que le visiteur soit emmené directement sur la page de votre blog qui en parle ? Pour ce faire, il existe un plugin WordPress très pratique : Interactive World Maps. Je l’utilise sur mon blog voyage depuis peu et je vais vous montrer comment s’en servir pour créer une carte Google Maps.

Le plugin Interactive World Maps pour créer des cartes personnalisées

Il faut savoir que si vous recherchez un plugin de cartes personnalisées, vous trouverez deux types de plugins WordPress :

  • Des plugins basés sur la Google GeoChart API : ces plugins vous permettront de colorier des pays, des Etats, des régions, de placer des marqueurs sur les lieux de votre choix et de nommer tout ce petit monde !
  • Des plugins basés sur la Google Maps API : on est ici beaucoup plus proches de ce qu’on peut créer avec My Maps… mais beaucoup d’extensions WordPress de ce type ne sont plus mises à jour ou sont très ciblées sur un usage e-commerce, par exemple pour créer un « store locator » et permettre aux internautes de trouver les magasins physiques d’une enseigne.

Interactive World Maps est basé sur la GeoChart API, il est donc très pratique pour créer des cartes axées sur des régions : montrer des pays visités sur un blog voyage, montrer des tendances sur n’importe quel sujet (faire ressortir les résultats des élections par région, les tendances météo par lieu, les top villes sur un sujet donné, etc).

Créer une carte personnalisée pour son site
Créer une carte personnalisée pour son site

Installer Interactive World Maps

Le plugin est vendu sur Envato Market pour 19€ environ. Il suffit de l’ajouter au panier puis de créer un compte (en fonction de votre lieu de résidence, le site ajoutera la TVA… ou pas).

Vous pouvez ensuite payer par carte bancaire, PayPal ou « crédit Envato », un système qui consiste à charger votre compte avec de l’argent puis à payer avec ce solde (ce qui vous évite les quelques euros de frais prélevés sur les paiements par carte bancaire/PayPal).

Vous retrouvez ensuite les fichiers à télécharger en cliquant sur votre nom d’utilisateur en haut de page puis sur « Downloads » dans le menu déroulant. Pensez à cocher la case « Get notified by email if this item is updated » pour recevoir les mises à jour du plugin.

Installer Interactive World Maps
Installer Interactive World Maps

Allez ensuite dans le menu Extensions > Ajouter de WordPress et cliquez sur « Téléverser une extension » en haut de page puis choisissez le fichier d’installation du plugin Interactive World Maps et lancez l’installation.

Installer une extension WordPress
Installer une extension WordPress

Paramètres par défaut des cartes

Le plugin crée un nouveau menu intitulé « Interactive Maps », avec un sous-menu « Settings » où vous pouvez définir des paramètres par défaut pour vos cartes.

La partie « Default Visual Settings » concerne l’apparence visuelle par défaut des cartes : couleur de fond (Background Color), couleur des bordures (Border Color), largeur des bordures (Border Width), couleur des régions inactives – c’est-à-dire celles que vous ne mettez pas en avant sur la carte (Inactive Region Color), couleur des régions actives (Active Region Color), taille des marqueurs que vous placez sur les cartes (Marker Size), largeur et hauteur par défaut des cartes en pixels, conservation des proportions (« Keep Aspect Ratio »)…

La partie « Default Map Settings » définit le type de carte par défaut quand vous créez une nouvelle carte : carte du monde ou carte d’un endroit plus précis, marqueurs de lieux précis ou « coloriage » de régions entières, avec interactivité (en cochant la case « Enable ») ou sans, avec des « tooltips » (infobulles) d’informations complémentaires qui s’affichent quand on clique sur un marqueur…

La partie « General Settings » permet de configurer encore plus d’options. La plupart sont des options techniques que vous n’avez pas à toucher sauf si vous savez ce que vous faites ou que le support technique du plugin vous demande de les activer suite à un problème technique propre à votre site ;) Il y a néanmoins quelques options intéressantes :

  • Render HTML in the tooltips – Activer cette option permet de mettre du code HTML dans les tooltips, bien pratique pour y inclure de « jolis liens » ou autres personnalisations.
  • Responsive Maps – Cocher la case « Redraw Map when viewport size changes » permet de redimensionner les cartes sur mobile (même si, évidemment, le confort d’affichage sera bien différent).
  • Google Maps API Key – Vous pouvez utiliser le plugin sans clé API Google Maps, c’est-à-dire sans vous inquiéter de la dimension payante de Google Maps… mais pour certains types de cartes un peu plus poussées, il faut créer une clé API sur le site de Google, en entrant ses coordonnées bancaires. Bien entendu, vous ne paierez que si vous dépassez le seuil de trafic indiqué sur la page des tarifs.

Créer une nouvelle carte

Le sous-menu « Add new cart » du plugin vous permet de créer une nouvelle carte Google Maps.

A gauche, renseignez le nom et la description de votre carte dans la partie « Details ».

En-dessous, utilisez la partie « Visual Settings » si vous souhaitez personnaliser l’apparence visuelle de la carte sans utiliser les paramètres par défaut.

Carte d'Europe personnalisée
Carte d’Europe personnalisée

A droite, la partie « Map Settings » vous permet de choisir…

  • Le point de départ de votre carte : le monde entier, un pays précis, un espace plus large (Europe par exemple)…
  • Display Mode – Vous pouvez choisir ce que votre carte va afficher : des régions, des marqueurs ronds (« round markers ») basés sur du texte ou sur des coordonnées de latitude/longitude (cette fonctionnalité exige d’avoir recours à l’API Google Maps), du texte, une icône personnalisée…
  • L’action qui a lieu quand on clique sur une région/un marqueur actif (Active Region Action) – On peut déclencher toutes sortes d’actions, comme ouvrir un lien dans une nouvelle fenêtre, afficher du contenu sous la carte, etc.

C’est la partie « Interactive Regions » qui vous permet d’ajouter à votre carte les éléments que vous souhaitez y faire figurer. Le plus simple pour renseigner un point précis est d’indiquer son emplacement en latitude/longitude.

Ajouter un marqueur à une carte personnalisée
Ajouter un marqueur à une carte personnalisée

Si vous avez activé l’API Google Maps, il suffit d’indiquer un lieu et de cliquer sur « Convert » pour obtenir ses coordonnées géographiques.

Convertir un lieu en coordonnées de latitude et longitude
Convertir un lieu en coordonnées de latitude et longitude

Sinon, vous pouvez utiliser un site comme Maps.ie. Entrez un lieu (plus ou moins précis), le site vous donnera sa latitude et sa longitude.

Renseignez-les ensuite dans le champ « Region Code » du plugin Interactive World Maps en les séparant par un espace et en commençant par la latitude. Pour Paris, ça donne par exemple :
48.856614 2.3522219000000177

Le champ « Action value » permet quant à lui d’indiquer l’URL à utiliser si vous souhaitez diriger le visiteur vers un contenu précis quand il clique sur cette partie de la carte.

Voici comment ça s’affiche ici :

Exemple de carte personnalisée
Exemple de carte personnalisée

La carte présentée en prévisualisation n’est pas cliquable, c’est normal. Dessous, vous disposez d’options pour modifier le niveau de zoom de la carte.

Par exemple, quand j’ai conçu une carte de l’Angleterre pour mon blog voyage, elle m’affichait par défaut toute la Grande-Bretagne, une limitation de la Geochart API de Google sur laquelle le plugin est basé. Avec le zoom, j’ai pu un peu mieux centrer la carte.

Ensuite, pour afficher la carte Google Maps personnalisée sur son site, regardez en haut de la page : le plugin vous propose un shortcode (qui peut être inséré dans un article, une page, un widget) ou un code php (si vous voulez intégrer la carte à votre thème WordPress à un endroit de votre choix).

Vous pouvez voir un aperçu du rendu sur mon guide de voyage à York par exemple !

Le plugin Interactive World Maps offre une solution simple pour créer facilement des cartes personnalisées pour son site et s’appuyer sur ces cartes pour orienter les visiteurs vers un article précis.

Utilisez-vous des cartes sur votre site ? Si ce n’est pas le cas, en auriez-vous l’utilisé ?

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

2 commentaires sur “Comment créer une carte Google Maps personnalisée pour son site ?

Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.