Google Maps

Afficher une carte Google map dans un site Web

Il y a 2 manières d'afficher une carte Google Map dans un site Web :

1. Utiliser l'iframe fournie par Google Maps

2. Utiliser l'API fournie par Google Maps

L'implémentation de l'iframe Google Maps (embed) pour afficher une carte simple dans votre site ne nécessite pas de clé API, ni de compte Google, ni d'option de facturation.

Dans Google Maps, sélectionnez l'adresse que vous voulez intégrer, cliquez sur Partager, Intégrer, Copier le HTML, puis collez le HTML dans votre page Web.

Ce HTML peut être copié :

• Pour WordPress, dans un block Gutenberg "HTML"

• Pour Divi, dans un block "Code" ou un block "Texte" en mode édition HTML.

Tutorial vidéo :

• Comment intégrer une carte Google Map dans un site Web en HTML

• Comment intégrer une carte Google Map dans WordPress

• Comment intégrer une carte Google Map avec Divi

Version courte : dans Google Maps, sélectionner un lieu, cliquer sur Partager, puis Intégrer, et copier/coller le code donné dans un bloc ou module HTML.

Certains plugins WordPress ou autres systèmes d'intégration demandent une clé API Google Maps (c'est le cas depuis juin 2016 - auparavant, il n'y en avait pas besoin).

Une clé API est comme un mot de passe qui vous permet d'utiliser les services de Google Maps. Son utilisation permet à Google de monitorer votre usage de ses ressources.

Pour obtenir cette clé API, il vous faut tout d'abord un compte Google / Gmail. Si vous n'en avez pas, il faut le créer.

Ensuite, votre clé API s'obtient dans le Google Developers Console (devenu "Google Cloud") Suivez ce lien, puis :

Choisissez votre pays de résidence, l'acceptation ou non de l'inscription à leur mailing list, validez les conditions, cliquez sur "Accepter et continuer" si vous êtes d'accord avec leurs conditions.

Vous pouvez lui donner un nom : ce nom vous sert en interne, pour vous organiser, lorsque vous en avez plusieurs. Vous pouvez par exemple lui donner le nom du site sur lequel vous allez l'utiliser.

Restrictions : vous pouvez paramétrer des restrictions d'utilisation à la clé que vous êtes en train de créer, pour qu'elle ne soit utilisable que dans certaines conditions de votre choix. Pour en savoir plus sur ces restrictions, cliquez sur le lien "Learn more" ("En savoir plus") proposé dans la page.

Pour tester la clé, il est plus facile de ne mettre d'abord aucune restriction, puis une fois qu'elle fonctionne, de lui paramétrer la restriction "Référent http" en mettant ici votre nom de domaine sous cette forme : *.domaine.com/*

Les * sont des jokers.

Validez.

La clé s'affiche alors :

Une fois copiée, vous pouvez cliquer sur "FERMER".

Vous pourrez toujours retrouver cette clé dans ce site Google, en sélectionnant le projet concerné, puis le menu "Identifiants".

Si votre prestataire Web vous a demandé une clé API Google Map, c'est ceci que vous pouvez lui communiquer.

Pour que votre clé API fonctionne, vous devez entrer un moyen de paiement dans votre compte, même pour une utilisation gratuite : veuillez continuer à lire cet article jusqu'au bout.

Si votre site Web / logiciel vous demande d'autres APIs et services, vous pouvez cliquer sur "Tableau de bord" puis "Activer les API et les services".

Ici, vous aurez le choix dans toutes les API proposées par Google :

Depuis le 16 juillet 2018 (repoussé depuis le 11 juin 2018), Google a mis en place une politique tarifaire pour l’affichage de cartes sur votre site qui utilisent son API.

L'annonce a été une surprise, car la plupart des sites affichaient des cartes Google Maps gratuitement.

Jusqu'en février 2025, Google offrait 200$ d'utilisation chaque mois (environ 28 500 chargements de cartes). Depuis le 1er mars 2025, ce crédit est remplacé par un quota d'appels gratuits par service et par mois (par exemple 10 000 appels pour les services Essentials) : vous n'êtes débité qu'au-delà. Si votre site Web a peu de visites, vous restez donc en général dans le quota gratuit.

L'utilisation de cette API Google Maps est donc gratuite pour la plupart des cas, mais vous devez entrer vos informations bancaires pour que le service fonctionne.

L'annonce de Google : À compter du 11 juin 2018, vous devrez activer la facturation par carte de crédit et disposer d'une clé API valide pour tous vos projets.

Voir les quotas gratuits et les tarifs de Google Maps Platform : https://mapsplatform.google.com/pricing/?hl=fr

Pour activer la facturation sur votre compte : https://mapsplatform.google.com/#get-started

Si vous n'avez pas de carte de paiement pour configurer un compte de facturation, vous pouvez vous rapprocher d'un partenaire Google Maps local pour obtenir de l'aide.

L’implémentation de l’iframe Google Maps (embed) pour afficher une carte simple dans votre site ne nécessite pas de clé API, ni de compte Google, ni d’option de facturation.

Google est aujourd'hui incontournable et reste la meilleure alternative. Si toutefois vous voulez explorer d'autres solutions, vous pouvez rechercher des alternatives à Google Maps, comme https://openlayers.org ou https://www.openstreetmap.org.

N'hésitez pas à partager dans les commentaires vos alternatives préférées à Google Maps.

Note : Google Developer Console est devenu Google Cloud.

Le bouton pour supprimer un projet de Google Cloud n'est pas forcément évident à trouver.

Rendez-vous dans la liste de vos projets à cette adresse : https://console.cloud.google.com/cloud-resource-manager

Cliquez sur les 3 points à droite de votre projet, cliquez sur supprimer et suivez les instructions.

Voici comment intégrer une carte Google Maps dans n'importe quel site web, qu'il soit WordPress ou non. Alors, qu'est-ce que Google Maps ? Un service de Google qui va cartographier la Terre entière jusqu'à un niveau de détail incroyable. Google Maps propose de localiser des lieux, mais également de calculer des directions d'un point A à un point B.

Première chose à faire, c'est d'ouvrir Google Maps dans son navigateur. Pour faire ça, vous pouvez soit taper l'adresse maps.google.com, soit google.com/maps, soit taper « Google Maps » dans Google et cliquer sur le premier résultat. Peu importe. Une fois que Google Maps est ouvert, ce que vous voulez, c'est localiser l'adresse, le lieu que vous voulez partager.

Par exemple, si je veux partager une adresse en Suisse, à Berne, je peux soit me rendre sur place comme ça : on navigue avec la molette de la souris, puis en laissant appuyé le clic gauche, jusqu'à ce que je trouve le lieu, par exemple le Musée des arts de Berne. Là, j'ai cliqué sur le nom. On voit que l'adresse a changé : elle inclut le nom du lieu dans l'adresse également, et il y a à gauche un petit encart avec les informations sur le lieu que j'ai sélectionné.

Maintenant, je ne suis pas obligé d'aller chercher le lieu à la main, évidemment. Je peux taper son adresse en haut à gauche, par exemple ici « Musée d'art Berne ». Il me propose le résultat, je clique dessus et ça nous fait la même chose que tout à l'heure. C'est là qu'on veut arriver.

Une fois qu'on est ici, on va cliquer sur le bouton « Partager » qui se trouve ici à gauche, dans le cas du lieu qui a été sélectionné. Lorsque je clique sur « Partager », il y a un pop-up qui s'ouvre avec deux options : « Envoyer un lien » ou « Intégrer une carte ». Je peux sélectionner ce lien et le copier, vous cliquez sur le bouton « Copier le lien ». C'est la même chose que clic droit, copier, ou Ctrl+C.

Maintenant, ce qu'on veut faire, c'est plutôt intégrer une carte. On clique sur « Intégrer une carte ». On voit ici qu'il y a un code, un bouton pour le copier, et puis une option à gauche : il s'agit de la taille de la carte. Si je mets « Petit », ça va intégrer une petite carte dans mon site. Si je mets « Moyen », une carte moyenne. Si je mets « Grand », une grande carte. Et je peux également choisir une taille personnalisée.

Ça, ça va être le mieux, parce qu'on va pouvoir intégrer une carte exactement aux dimensions de notre site web. Si vous avez un site web, vous connaissez probablement ses dimensions, par exemple celles du contenu principal. Ça peut être 800 pixels, 980, 1040, 1080, 1100, ça dépend vraiment de vous et de votre site web.

Ici, imaginons que je veux intégrer une carte dans un article de ce site. On voit qu'il y a une largeur fixe. Si vous ne la connaissez pas, si vous ne l'avez pas notée, pour la trouver on va faire clic droit, « Inspecter », et on va la trouver dans le code. Si vous n'y arrivez pas, ne vous inquiétez pas, je prépare une vidéo à part pour ça. Pour l'instant, vous pouvez tester au hasard 800, puis vous pourrez changer après, par exemple.

Ici, il se trouve que ce site fait 795 de large. Je vais donc dire que je veux une carte de 795 pixels, et je mets 400 en hauteur. Ici, je peux faire afficher un aperçu en taille réelle pour qu'il montre à peu près la taille que ça fait. Et voilà, tout simplement.

Maintenant, je vais cliquer sur « Copier le contenu HTML ». C'est la même chose que si j'avais tout sélectionné ici en faisant un triple clic, puis clic droit, copier. C'est exactement la même chose. Ça va copier ce code.

Maintenant, je vais l'intégrer dans mon site. Je me rends dans le site, à l'endroit où je veux mettre la carte. Ici, ce n'est pas une page Divi, c'est un article de blog, donc ça doit être du Gutenberg. Avec Gutenberg, je vais ajouter un bloc. Je vais lui dire que je veux mettre du HTML. Ici, je vais simplement faire Ctrl+V, ou clic droit, coller, et c'est fini.

Je vais cliquer sur « Mettre à jour ». Une fois qu'il a enregistré, je vais cliquer sur « Voir l'article ». Et ici, la carte a été intégrée exactement aux dimensions.

Maintenant, si vous voulez changer les dimensions sans avoir besoin de retourner dans Google Maps, il vous suffit, dans le code, de repérer les attributs HTML « width » et « height ». Comme c'est du code, tous les langages de programmation, la plupart, sont en anglais : largeur, c'est « width », et hauteur, c'est « height ». Ici, on voit bien 795 et 400, c'est ce que je lui avais demandé là. Mais je peux simplement le changer ici si, par exemple, je veux faire 400 x 200. Attention à ne pas changer le reste du code, seulement ces deux nombres.

Je vais cliquer sur « Mettre à jour », je vais revenir ici et je vais actualiser la page. C'est bien changé en 400 sur 200.

Si vous êtes dans une page de type Divi, vous allez simplement ajouter un module de type « Texte » ici, puis vous rendre sur l'onglet HTML. En fait, ces onglets « Visuel » et « HTML », c'est juste la traduction de Divi qui est mauvaise. On se rend sur le deuxième onglet, là où c'est du code, on va supprimer ce qu'il y a dedans et on va copier-coller. Toujours le même code, il n'y a rien de sorcier. C'est la même chose que tout à l'heure : on va copier-coller celui-ci là-dedans. Et vous voyez, il n'y a rien d'autre à faire, la carte est bien là.

Et toujours sur Divi, il y a une autre manière d'ajouter une carte, mais qui va ici nécessiter une API Google Maps, donc qui va être plus compliquée, et c'est ce qu'on voit dans l'autre vidéo.