fbpx
/ English
api google maps

Comment créer un clé d’API Google Maps pour afficher la carte de mon site WordPress ?

Mise en  contexte

Plusieurs thèmes WordPress comportent une carte Google. Depuis le 11 juin 2018, il est obligatoire d’activer un compte de facturation afin de pouvoir continuer à utiliser les services Google Maps.

Le service de carte, qui jusqu’à présent était gratuit, devient maintenant payant à partir d’un certain quotas.

Lors de votre inscription au service Cloud de Google, vous avez 300$ offert la première année afin de tester les différents services.

Pour les services Maps, Routes et Places Google « offre » un quota mensuel gratuit de 200$ qui est illimité dans le temps pour le moment.

Pour les utilisateurs qui ont un site qui n’a pas énormément de visite, ce quota sera largement suffisant et ils n’auront pas à payer le service.

Connexion au compte Google

Pour activer la facturation, voici la procédure à suivre :

Se connecter ici à votre compte Google => https://console.cloud.google.com

Création du projet

Vous devrez vous identifier avec votre compte Gmail et vous aurez l’écran ci-dessous :

Création du projet pour créer une clé d'API Google Maps.

Cocher les choix comme sur l’exemple et cliquez sur ACCEPTER ET CONTINUER.

En haut de l’écran, choisir Sélectionnez un projet :

Google Cloud création d'un projet pour une clé d'API Google Maps

Puis créez un NOUVEAU PROJET :

Google Cloud création projet

Pour cet exemple, on appelle le projet ‘MonSiteWeb’ mais vous pouvez bien entendu mettre le nom que vous voulez. En général on met le nom de notre site Web :

Google Cloud création projet

Puis validez en cliquant sur CRÉER.

Activation de la facturation

Cliquez sur le menu en haut à gauche, puis choisir Facturation :

Google Cloud création projet

Choisir ensuite Associer un compte de facturation :

Google Cloud activation de la facturation

L’écran suivant apparaît, cliquez sur CRÉER UN COMPTE DE FACTURATION :

Google Cloud activation de la facturation

Cochez les choix comme ci-dessous et cliquez sur Accepter et continuer :

Suite de la création du compte

L’écran suivant apparaît :

Mode de paiement pour le nouveau compte

Complétez vos informations bancaire puis cliquez sur Démarrer l’essai gratuit.

Voilà, le compte de facturation est créé!

Activer l’API pour utiliser le service de carte Google Maps

Retournez dans le menu de gauche puis choisir API et services :

Activer l'API Google Maps

Choisir le menu Bibliothèque :

La bibliothèque pour la clé d'API Google Maps

Ensuite dans le menu de gauche, choisir Maps :

Google Maps

Choisir maintenant Maps Javascript API qui s’affiche au centre de l’écran :

L'API JavaScript de Google Maps

Puis cliquez sur le bouton ACTIVER :

Activer l'API Google Maps

Créer la clé API Google Maps

Maintenant que l’API est activée, il faut créer une clé. Cliquez sur Identifiants :

Créer la clé d'API Google Maps

Cliquez sur Créer des identifiants :

Les identifiants de la clé d'API Google Maps

Et choisir Clé API :

La création de la clé d'API Google Maps

La clé API apparaît. Vous pouvez la copier pour l’utiliser sur votre site.

Il faut ensuite cliquer sur RESTREINDRE LA CLÉ afin que ce soit seulement votre site qui puisse utiliser cette clé :

L'identifiant de la clé d'API Google Maps

Choisir Référents HTTP, puis entrez l’adresse de votre site sous la forme :

https://*.monsiteweb.ca/*

La configuration des référents

Puis cliquez sur Enregistrer.

Géocoding

Suivant la configuration de votre site, vous aurez aussi parfois besoin de l’API Geocoding. Afin de l’activer, il faut retourner dans la bibliothèque :

La bibliothèque de l'API Google Maps

Puis sélectionner Geocoding API :

L'API de geocoding de Google Maps

Ensuite il suffit de cliquer sur le bouton bleu Activer.

Votre clé API Google Maps est correctement configuré !

Vous pouvez maintenant l’envoyez à votre programmeur Web afin qu’il puisse faire afficher une carte sur votre site.

N’hésitez pas à nous contacter si vous aimeriez avoir un coup de main!

Auteur de l'article

Gilles Duquerroy

Flexocodeur
Gilles, c’est d’abord et avant tout un parcours hors du commun. Passionné par les ordinateurs depuis sa plus tendre enfance, il devient professeur de technologies et part enseigner dans divers lycées français d’Afrique pendant plus de 15 ans. Autodidacte, il commence à créer des sites Web dès qu’intervient la démocratisation d’internet. En 2013, après avoir complété sa formation universitaire au Conservatoire National des Arts et Métiers d’Amiens, en France, il décide de se consacrer à ses premières amours : les langages de programmation Web!

À découvrir sur notre blogue

2021-12-02

Foire aux questions (FAQ) sur WordPress : 4 techniques pour l’ajouter sur votre site

Vincent Gaudreau / Programmeur Web

Une foire aux questions (FAQ) est une section importante sur votre site WordPress. Voici 4 techniques pour l’ajouter sur votre site Web.

Lire la suite
2020-01-21

Yoast SEO : comment configurer l’extension sur un site WordPress ?

Davyd Quintal / Directeur des solutions novatrices

Yoast SEO est une extension qui ajoute des configurations supplémentaires à WordPress permettant d’optimiser le contenu de votre site Web.

Lire la suite
2021-06-21

Le fil d’Ariane : comment l’ajouter sur un site WordPress ?

Vincent Gaudreau / Programmeur Web

Il existe plusieurs techniques pour ajouter un file d’Ariane sur un site WordPress. Ce tutoriel vous aidera à choisir la bonne technique!

Lire la suite
2016-11-22

Marier SVG & Javascript

David Barbier / Shaman programmeur

SVG (Scalable Vector Graphics / Graphiques vectoriels redimensionnables) est une spécification du W3C qui date déjà de 2001.

Lire la suite

8 commentaires pour “Comment créer un clé d’API Google Maps pour afficher la carte de mon site WordPress ?”

  1. Marie dit:

    Bonjour, pour le réferrent HTTP, doit on mettre l’adresse de la page d’accueil ou l’adresse où se situe la carte google sur notre site ? Merci beaucoup !

    1. Bonjour, tu peux effectivement mettre l’url de la page où il y a la carte. Sinon on peut aussi mettre une url sous la forme https://*.monsiteweb.ca/* afin que la clé fonctionne sur tous le site si jamais tu as d’autres cartes ailleurs

  2. Djan Lawouze dit:

    bonjour, mon site a été bloqué par celui qui l’a monté parce qu,il a un problème avec un membre. comment faire pour débloqué ce site?

    1. Qu’est-ce que tu entends par « bloqué »? S’il a désactivé la clé d’API Google dans son compte, tu peux simplement en créer une nouvelle dans ton compte en suivant les instructions de cet article de blogue et ensuite la substituer sur ton site.

  3. Bonjour, faut-il obligatoirement créer un compte de facturation ?

    1. Oui, depuis 2018 Google exige qu’un compte de facturation avec carte de crédit valide soit utilisé pour générer la clé d’API. Et ce, même si l’utilisation ne dépasse pas la limite mensuelle gratuite.

  4. jessica dit:

    Bonjour,
    J’essaie de faire la même chose mais avec le plug-in Google Review pour faire remonter les avis Google Business sur mon site en cours de réalisation.
    Lorsque je saisie ma clé dans mon widget, j’ai cette info  » Google error: API keys with referer restrictions cannot be used with this API. ».
    Pourriez-vous me dire si c’est parce que je n’ai pas encore déclarer mon site dans la search console ?
    Merci d’avance pour votre aide et retour.

    Cordialement,
    Jessica

    1. Bonjour,
      D’après le message d’erreur la clé API comporte des restrictions et serait par IP, essayez donc en mettant HTTP referrers pour la restriction.

Laisser un commentaire

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

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.