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…
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". Il vous permet de générer une carte Google Maps vierge, où vous pouvez ensuite ajouter les éléments de votre choix.
Le principe est très simple : cliquez sur "Carte sans titre" pour donner un nom à votre carte.
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é.
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.
Ç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.
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" :
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 !
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".
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.
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".
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 personnalisée.
Le plugin Interactive World Maps pour créer une carte Google Maps personnalisée
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 (que vous pouvez télécharger ici) 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).
Installer Interactive World Maps
Le plugin est vendu sur Envato Market à un prix très raisonnable. 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 Skrill.
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.
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.
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 map" du plugin vous permet de créer une carte Google Maps vierge.
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.
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.
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.
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.3522219000000177Le 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 :
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).
Le plugin Interactive World Maps offre une solution simple pour créer une carte Google Maps personnalisée de manière simple et rapide pour son site et s'appuyer sur ces cartes pour orienter les visiteurs vers un article précis.
Bonjour Marlène,
Merci cet article complet. Je cherche une solution pour faire en sorte que les liens intégrés à la carte Google Maps de mon article renvoient vers un paragraphe de ce même article sans ouvrir un nouvel onglet. En effet je voudrais mettre une carte qui référence 5 restaurants en début d’article et via la carte pouvoir navigué vers le paragraphe qui traite de chacun des restaurants. Je te remercie pour ta réponse.
Bonjour Greg, il faudrait créer un système d’ancres dans l’article, chaque paragraphe correspondant à une ancre. Ensuite, on fait un lien incluant cette ancre pour arriver directement au bon paragraphe sur la page. C’est fou comme je reçois souvent des questions là-dessus, je vais finir par en faire un article car tu n’es pas le seul à vouloir ce genre de résultat :) En attendant, voici un tutoriel sur Alsa Créations qui explique comment procéder.
Bonjour,
Dans mymaps, j’aimerai intégrer via un code html une image cliquable dans la description d’un repère sur la carte. On peut ajouter photos et vidéos, mais ce n’est pas cliquable…
Savez-vous si c’est possible ?
Merci pour cet article !
Hello Benoit, on peut ajouter une image. On peut ajouter un lien cliquable (dans la description). Mais une image cliquable, je ne crois pas que ce soit possible car le code HTML n’est pas interprété quand on en écrit dans le champ de la description.
Merci beaucoup pour cette réponse rapide !
J’ai essayé aussi d’intégrer un lien sous un texte… ça ne marche pas non plus… je crois que je n’ai pas de solution…
Bonjour Benoit, normalement il suffit de coller un lien « en l’état » dans le champ de la description pour qu’il soit cliquable.
Oui oui… mais je voulais dire associer un lien à un texte.
Par exemple pour la description d’un oiseau, écrire le nom de l’oiseau et le rendre cliquable pour obtenir un renvoi vers une description détaillée sur une page internet.
Bonjour,
Je suis arrivé non sans mal a intégré les points des villes où j’ai vécu sur une carte .
Je n’arrive pas a trouver comment faire pour individualiser chaque point et adapter la taille par rapport au nombre de mois ou j’y ai vécu.
Je l’ai vu souvent et j’aimerais pouvoir le faire.
J’ai crée un tableau avec les villes et les mois. Les villes sont bien afficher mais comment personnaliser chaque point….
Merci par avance.
Bonjour Gérard, sur Google Maps My Maps, on ne peut pas personnaliser la taille des points, on peut seulement personnaliser la couleur et l’icône associée à chaque point. Je pense que ce type de personnalisation de taille du marqueur est possible en utilisant non pas le service My Maps en ligne mais l’API Google Maps… sauf que ça devient des lignes de code à rédiger :)
Bonjour,
Sur un site wordpress je cherche un plugin qui permet au personnes d’inscrire leur adresse et qu’un marqueur apparraisse sur une carte google avec indication de latitude et longitude.
Connaissez vous ce genre d’extension ?
Cordialement.
Bonjour Philippe, je ne connais pas de plugin qui fasse « tout ça ». Essayez peut-être d’explorer du côté de l’add-on UpQode Google Maps (add-on prévu pour le plugin WPBakery). Il semble gérer l’auto-complétion d’adresse + la latitude/longitude… mais je ne sais pas s’il peut faire les deux ensemble !
Oups j’ai retrouvé comme intégrer la carte à mon site, par contre pour le partage, je dois obtenir un lien pour partager, mais que dois-je en faire ensuite ??
Merci d’avance pour votre aide.
Bonjour Delphine, c’est expliqué dans l’article et la procédure n’a pas changé. A quelle étape êtes-vous bloquée ?
Bonjour,
Merci pour cet excellent artcile qui m’a rendu déjà bien des services ;)
Or aujourd’hui je viens de constater qu’avec le service « My Maps » de Google, on ne peut plus partager la carte en mode public, ni intégrer le code à un site :(
Savez-vous s’il y a une autre façon de faire ?
Super ton article, enfin un article qui explique simplement comment mettre une carte interactive. Merci beaucoup.
J’ai deux petites questions pour toi :
– Concernant interactive World Maps, ce plugin permet de personnaliser les cartes du monde, région, pays mais pas les villes en détails si ?
– La carte google maps gratuite, y a-t-il possibilité de mettre le fond de carte en N/B par exemple pour faire ressortir les points que nous rajoutons ?
Merci beaucoup
Hello, sur Interactive World Maps il n’y a effectivement pas les villes. Pour la carte Google Maps gratuite, oui c’est possible de modifier le fond :) Sous la liste des villes tu as un discret menu « Carte de base » où tu peux choisir l’apparence du fond de carte, il y a une sorte de sépia…
Top merci beaucoup !
Je n’utilise pas de carte mais j’aimerai beaucoup mettre un petit point repère au début de mes articles, sous le titre, qui indique le pays/la ville dont parle l’article. Je cherche encore. :)
Sur Blogger, tu n’as pas de système de « champ personnalisé » où tu pourrais ajouter l’information… donc le plus simple est de l’écrire au début de chaque article, quitte à trouver une jolie mise en forme pour mettre le lieu en avant :)
Bonne idée que de l’intégrer directement à l’article. Je n’y avais même pas pensé. Après, je le met souvent dans le titre donc peut-être n’est-ce pas spécialement utile. :)
Hello !
Genial cet article, presque toutes les infos que je cherchais !
Une petite question, grâce au plugin peut-on charger les cartes déjà créées sur mymap ?
Hello Aurélie, j’ai regardé sur le plugin mais je n’ai pas vu d’option pour importer des cartes existantes.
Bonjour,
Je ne connais encore rien de tout ça, mais je voudrais faire un blog ou un site, avec cartes interactives.
Mais je voudrais des avis…, privés.
Trop de questions.
Trop compliqué je crois.
Bref, vous l’aurez compris, je suis un peu perdu.
Bonjour Janfi, pour un conseil personnalisé il faut se tourner vers un professionnel qui prendra le temps d’étudier le projet et de fournir des conseils adaptés, y compris techniques.
Bonsoir.
Hormis me faire un devis, il est difficile d’avoir un conseil désintéressé. Merci quand même.
Je vais continuer de chercher une solution adaptée à mes envies…, si ça existe.
Bonjour Janfi, un conseil désintéressé ET personnalisé demande du temps, une étude de projet… donc si vous cherchez du gratuit, tournez-vous peut-être vers des forums, plusieurs personnes peuvent répondre en se complétant les unes les autres.
Bonjour.
Oui, pourquoi pas.
Il faut que j’arrive à savoir si je fais un blog ou un site.
Quel type carte pour mon projet.
J’ai tellement de question que ça fumes dans ma caboche.
Je vais chercher du côté des forum.
Merci pour vos conseils.
Bonjour,
je souhaiterais créer une carte interactive qui serait consultable par une liste de personne, notamment pour repérer qui sont les membres autour d’une adresse. J’ai des difficultés à partager la carte avec des personnes qui n’ont pas de compte google.. savez vous comment je peux faire ? merci pour votre aide
Bonjour, ce n’est pas possible… mais on peut contourner cette limite. Il faut simplement rendre la carte accessible à toutes les personnes disposant du lien… et envoyer vous-même le lien aux personnes n’ayant pas de compte Google :)
Bonjour Marlene…
j’ai une question toute bete… est-il possible de faire afficher les titres des marqueurs… j’ai bien saisi pour les personnaliser.. leur donner le nom que l’on veut… mais je voudrais qu’ils s’affichent sur ma carte.. et je ne trouve pas comment…
merci pour votre aide!
Arabelle
Bonjour Arabelle, pour afficher par défaut les labels des marqueurs sur My Maps, il faut cliquer sur « Styles individuels » au niveau du calque auquel on a ajouté des lieux et au niveau de l’option « Définir des libellés », choisir « Nom » par exemple, qui permettra d’afficher le nom du marqueur sur la carte.
Salut et merci pour cet article!
J’ai des cartes sur mon blog de voyage avec le plugin Basic Google Maps Placemarks. Depuis la news en juillet, j’ai pas cherché à comprendre, et j’ai rien fait pour mettre à jour mes cartes qui sont devenues toutes moches… Je m’y attelle aujourd’hui, et je suis contente de tomber sur ton article dans mes premières recherches! Ma carte est « embed » il me semble donc je suis ravie de voir que c’est gratuit! En revanche il faut quand même mettre ces coordonnées si j’ai bien compris ?
Merci encore!
Hello Cécilia, je te conseille de contacter directement le créateur du plugin car je ne connais pas son fonctionnement et ne sais pas à quelles fonctionnalités de l’API Google Maps il fait appel. Bonne année 2019 à toi !
Hello Marlène !
J’utilise beaucoup Google Maps sur mon blog. C’est pour moi, un outil indispensable. Toutefois, la décision de Google de faire payer l’utilisation de l’API (que je n’utilise pas) me fait penser que le reste du service Google Maps peut devenir payant dans le futur. J’ai donc recherché des alternatives comme uMap qui utilise les données libres de Openstreetmap. Bien sûr, c’est beaucoup moins interactif que Google Maps mais ça a le mérite d’exister. Sinon, je ne connaissais pas ce plugin, il semble très intéressant. A voir si c’est adapté à mes besoins ;-)
Les modèles économiques peuvent bouger sur le web. Après, est-ce une raison suffisante pour se passer de l’outil par anticipation d’un changement de modèle qui n’arrivera peut-être pas… ou pas avant plusieurs années, je ne sais pas ;)
Pour un choix de plateforme, je le conçois car une fois qu’on a créé un site, on n’a pas forcément envie de le refaire 2 ans plus tard. Pour une fonctionnalité de carte, l’impact reste mineur à mon sens.
Ah ouais, c’est payant, j’suis choquée.
Qu’est-ce qui est payant ?