/ 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

2022-04-26

CSS : ce qui rends votre site Web sexy !

Marie-Michel Tremblay / Intégratrice Web, Graphiste

CSS est l’acronyme de Cascading Style Sheets ou en français «feuilles de style en cascade». C’est un langage pour formater le design de votre site.

Lire la suite
2016-11-28

Google AMP : c’est quoi ?

Antonin Chabannes / Spécialiste en publicité internet

Les pages Google AMP (Accelerated Mobile Pages) ont officiellement fait leur apparition sur le réseau Google depuis plus de six mois.

Lire la suite
2021-08-17

SEO 101 Shopify : optimisez votre boutique pour un meilleur positionnement Google

Davyd Quintal / Directeur des solutions novatrices

Dans la vidéo de cette semaine, je vous explique les bases du SEO sur un site créé avec la plateforme Shopify.

Lire la suite
2018-09-25

Publicités Facebook : comment définir correctement mon auditoire cible ?

Davyd Quintal / Directeur des solutions novatrices

Quand vous définissez votre auditoire, vous indiquez à Facebook une série de critères basés sur l’âge, l’emplacement géographique, les intérêts, etc.

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