Afficher une carte Google map dans un site Web (clé API Google Map)

par Jean - netologiste.com | Mis à jour le 3 Déc 2023 | WordPress | 0 commentaires

Depuis juin 2016, une clé API est requise pour intégrer des Google Maps dans un site, par exemple avec certains plugins WordPress ou d’autres manières.

Une clé API est comme un mot de passe qui vous permet d’utiliser les services de Google Maps.

Il vous faut tout d’abord un compte Google / Gmail. Si vous n’en avez pas, il faut le créer.

Comment obtenir votre clé API Google pour afficher une carte Google Maps dans votre site

Votre clé API s’obtient dans le Google Developers Console. Suivez ce lien, puis :

1. Nouveau projet Google APIs

Google vous propose ici de créer un nouveau projet ou de sélectionner un projet existant. Ces « projets » sont votre propre organisation dans votre console Google.

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 Google.

2. Clé API

Vous arrivez alors sur la page de création de la clé API.

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.

3. Voici votre clé API Google Maps !

La clé s’affiche alors :

Cette clé est une sorte de mot de passe que vous allez copier/coller pour la mettre là où elle vous est demandée.

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.

D’autres API et services

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 :

Paiement : Google Map devient payant

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 qui affichent des cartes utilisent Google Maps qui était gratuit jusqu’à alors.

200$ d’utilisation vous est offert chaque mois et vous ne serez débité qu’en cas de dépassement. Selon Google, seuls 0,35% des utilisateurs dépasseront ce seuil de 200$/mois offerts : cela veut dire que si vous avez un site Web à faible fréquentation, vous ne paierez jamais un centime pour utiliser Google Maps.

L’utilisation 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 ce que permet les 200$/mois offerts par Google : https://cloud.google.com/maps-platform/pricing/?hl=fr

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

Si vous n’avez pas de carte de crédit ni de débit pour configurer un compte de facturation, vous pouvez vous rapprocher d’un partenaire Google Maps local pour obtenir de l’aide.

Google est aujourd’hui incontournable et reste la meilleure alternative. Suite à leur annonce surprise, des alternatives vont probablement éclore avec le temps : cet article sera alors mis à jour.

Supprimer un projet de Google Developer Console

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

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

Carte simple

Note : 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.

Vous retrouverez un tutorial vidéo dans notre application e-learning (inscription gratuite) :

  • 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

0 commentaires

Soumettre un commentaire

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

Besoin d’aide personnalisée ?

Recevez de l’aide directement sur votre site : lors d’un appel Zoom avec partage d’écran, je travaillerais avec vous sur votre site.

Pratiquez à votre rythme avec les formations en ligne

Formation WordPress

Apprendre WordPress

Comprenez WordPress de A à Z : formation complète en vidéo pour tout apprendre de WordPress.

Formation Découvrir Divi

Découvrir Divi

Créez votre site Web sans faire de code grâce au constructeur visuel Divi.

Formation Mieux utiliser Divi

Mieux utiliser Divi

Mon expérience après avoir aidé des dizaines d'entreprises à améliorer leur site Web Divi.

Formation Hébergement

Guide hébergement

Un hébergement Web avec votre installation de WordPress dès aujourd’hui.

Formation Divi Intégration Web

Divi intégration Web

Création d'une page Web complexe à partir d'une maquette graphique.

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.