services informatiques sur Grenoble

marketing internet

Publié le novembre 3rd, 2016 | par Sébastien

0

WordPress : la carte Google ne s’affiche plus

Vous utilisez WordPress, le template Avada, et vous avez besoin d’une carte Google Maps interactive sur votre site internet. Cet article a été rédigé pour vous !

Depuis maintenant fin juin, Google n’autorise plus l’utilisation de l’API Google MAP sans condition … Le service devient payant au delà d’une certaine consommation. Pour le plus grand nombre, cela restera gratuit (la limite est de 25 000 chargement de carte / jour).

De fait et depuis, nombreux sont ceux qui ont constaté du jour au lendemain le dysfonctionnement de leur carte Google sur leur site (autrement dit Google Map ne s’affiche pas !) … Les utilisateurs doivent désormais être identifiés et utiliser une clé API pour le service en question.

Pour des projets de petite envergure, en tant que prestataire web, nous sommes amenés à utiliser le moteur CMS WordPress et le template Avada (template best of breed), disponible sur Themeforest.

Cet article a pour objet de fournir la solution à cette problématique i.e de traduire (les réponses sont souvent en anglais) et condenser les procédures en un seul lieux (il est nécessaire d’en suivre plusieurs) … Ça servira à tout le monde ! Procédons …

Google Map ne s’affiche pas : Google Maps API error …

Voici en quelques lignes les différents messages d’erreur que vous pouvez obtenir …

api-google-map-probleme-javascript

Google Maps API error : MissingKeyMapError

Google Maps API warning : NoApiKey

La solution au problème d’affichage Google Maps

Voici la procédure en plusieurs étapes :

1 – créer la clé Google Maps JavaScript API

Suivre ces étapes pour obtenir une clé API (vous devez disposer d’un compte Google) :

  • Aller la console Google API (Google API Console).
  • Créer ou sélectionner un projet (Create or select a project).
  • Cliquer sur Continue pour activer l’API et les services associés.
  • Depuis la page Identifiants (colonne de gauche – Credentials), récupérer une clé API (et paramétrer les restrictions de la clé d’API). nota : protéger l’usage de la clé en appliquant des restrictions (par ex. en spécifiant l’URL de votre site).

Vous disposez désormais d’une clé API qui ne pourra être utilisée que depuis votre site internet (nom de domaine exactement).

2 – Utiliser la clé API Google Maps dans Avada

Pour le template Avada, voici la solution la plus simple … Avada permet d’insérer la clé API depuis la section Avada > Theme options > Contact form > Google map.

 

avada-google-map-api

{Entrer|Copier-coller} la clé API dans le champ Google Maps API Key.

Sauvegarder et s’est terminé … Mais ce n’est pas aussi simple pour tout le monde …

Si vous ne voyez pas apparaitre ce champ, c’est que Avada n’est pas à jour … Voici la solution :

Mise à jour d’Avada

Vous devez disposer d’un clé de licence Avada valide (et activée dans WordPress).

Après avoir vérifié que Avada dispose de la dernière version (4.0.3 à ce jour), rendez-vous ensuite dans la rubrique support de Avada.

avada-support

Sur le bas de cette page, vous avez la possibilité de « patcher » (i.e appliquer une correction de bug minime) la version et d’ajouter la fonction Google Maps API Key.

avada-systeme-patch

Appliquer ainsi les mises à jour proposées, les unes après les autres. Et la fonction recherchée apparaitra (suivez la procédure insérer la clé API dans Avada).

nota : depuis Avada v.4, vous noterez le système de patch qui ne nécessite plus la mise à jour du template à chaque mise à jour mineure (correction de bug). C’est très appréciable et ce mécanisme permet d’être plus bien plus réactif !

nota : vous noterez également la réactivité de l’équipe Avada (Google publie l’info. le 22/06 et Avada sort un patch le 23/06)  …

Voila le tour et joué … Merci qui ?

Pour aller plus loin

Pour les autres template, il existe plusieurs méthodes (modification du fichier header.php, et ajout d’un code <script></script> dans le header de chaque page).


À propos de l'auteur

est professionnel de l'informatique et de la communication internet. Son métier lui donne souvent l'occasion de découvrir du matériel hightech, de développer et approfondir ses compétences dans des domaines complémentaires et variées (référencement, création de site, communication, marketing, formation etc …). Les articles et sujets abordés ici sont le fruit d'expériences de terrain et tentent d'apporter des solutions (ou des éclairages) à des problématiques bien réelles.



Laisser un commentaire

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

Retour vers le haut de la page ↑