Comment intégrer Google Maps sur son site avec la clé API ?

Comment intégrer Google Maps sur son site avec la clé API ?

Si vous êtes tombé sur cette page c’est que votre carte « Google Maps » sur votre site internet affiche un message d’erreur :

Petit problème… Une erreur s’est produite. Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console Javascript.
Impossible de charger Google Maps correctement sur cette page. Do you own this website.
Dans la suite de cet article nous vous guidons pas à pas pour retrouver un fonctionnement normal.

api-google-map-probleme-javascript

Repérer le problème


Sur Google Chrome en faisant clic droit inspecter, vous aurez accès à l’inspecteur, puis en cliquant sur la croix rouge en haut à droite vous aurez accès aux erreurs de la console.

Vous pourrez ainsi voir une erreur de type Google Maps API :

  • MissingKeyMapError
  • NoApiKeys
  • RefererNotAllowedMapError
  • Geocoding Service
capture ecran erreur gmap api

Vous avez un de ces problèmes ? Vous êtes donc arrivés sur la bonne page, merci Google.

En effet depuis le 11 juin 2018, vous devez activer un compte de facturation afin de pouvoir continuer à utiliser Google Maps. Ce service qui était gratuit devient payant 😲
Mais ne vous inquiétez pas Google vous offre l’équivalent de 2 500 requêtes par jour. Donc si vous n’avez pas autant de visites sur votre site, vous n’aurez jamais (pour l’instant) pas besoin de payer.

Voici les étapes pour activer votre API Google Maps

1 – Créer un compte sur Google Cloud Console

 

Rendez vous ici : https://console.cloud.google.com/

Un fois le compte crée ou une fois que vous serez loggé vous devez créer un projet.

Si vous êtes amené à gérer plusieurs API pour plusieurs sites, les projets vous permettrons de vous organiser donc nous vous conseillons de donner le nom de votre site à votre projet.

2 – Activer la facturation



Dans menu – Facturation vous devez vous rendre sur : Associer un compte de facturation
puis créer un compte de facturation. Vous devez compléter toutes les informations pour continuer.

capture ecran config gmap api

 

3 – Activation des API


Retourner dans le menu puis API et services – puis bibliothèque.
Dans la barre de recherche vous pouvez saisir MAPS
L’API la plus courante est MAPS JavaScript API – cliquez dessus puis activer.

capture ecran config gmap api

Une fois redirigé sur la page de l’API

Cliquer sur l’onglet identifiant et créer des identifiants – choisissez clé API

Votre clé apparait et google vous propose un bouton copier-coller pour l’insérer dans votre widget (wordpress ou autre) qui affiche votre carte sur votre site.

capture ecran config gmap api


4 – Restriction de la clé

Si vous ne configurez pas les restrictions, la clé ne pourra pas fonctionner.
Il vous faut donc choisir un référent HTTP de préférence.

capture ecran config gmap api


5 – Ça ne fonctionne toujours pas

Selon les widgets, thèmes ou plugins que vous utilisez il est possible que vous ayez besoin d’activer :

  • Places API for Web
  • Geocoding API
  • Maps Embed API

Il faut donc retourner sur API et services – puis bibliothèque et rechercher Geocoding et Maps Embed – et cliquer sur activer.

Prenez le temps de vérifier que les paramètres de restrictions ont été conservé et le tour est joué.

Malgré tous vos efforts vous avez toujours une erreur ?

Si la carte ne s’affiche pas de suite, il peut s’agir du cache de notre navigateur, de votre CDN ou du cache de google, patientez un peu ou contactez-nous si le problème n’est pas résolu quelques heures après.

Partager cet article, choisissez votre réseau
Partager sur facebook
Partager sur linkedin
Partager sur twitter
Partager sur email
A propos de : S-Kréa
A propos de : S-Kréa

S-Kréa est une agence de communication globale Notre approche de la stratégie marketing et de la croissance, va transformer votre communication et faire croître votre entreprise.

Articles similaires