/ Accueil / 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.e 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

2020-10-07

Redirection de pages sur un site WordPress : comment la configurer facilement ?

Davyd Quintal / Directeur des solutions novatrices

Configurez les redirections sur votre site WordPress et protégez-le contre la cause principale des erreurs « 404 – Page introuvable ».

Lire la suite
2017-12-12

SCRUM et la méthode Agile : Une introduction

David Barbier / Shaman programmeur

SCRUM et la méthode Agile sont en opposition à la chaîne de montage traditionnelle et centraux au cycle de développement chez Wenovio. Voici un bref aperçu.

Lire la suite
2021-11-16

Astuce SEO : demander une indexation à Google

Davyd Quintal / Directeur des solutions novatrices

Demander une indexation Google de votre site Web quand vous apportez des changements importants (ajouter, modifier et supprimer du contenu).

Lire la suite
2020-05-19

Comment installer l’éditeur classique sur un site WordPress

Davyd Quintal / Directeur des solutions novatrices

Jusqu’en décembre 2018, l’éditeur par défaut présent tous les sites WordPress était l’éditeur que l’on appelle aujourd’hui « éditeur classique ».

Lire la suite

Laisser un commentaire

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

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

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

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

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

  4. 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. Gilles Duquerroy dit:

      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