Depuis juin 2016, Google n’autorise plus de créer des cartes « Google Map » à la volée.

Vous êtes obligé de créer une clef API afin d’affiché une carte.

Créer une clef API

Pour ce faire, rendez-vous sur le site Google DevelopersGoogle Developers

https://developers.google.com/?hl=fr

Et connectez-vous à votre compte ou créez en un.

Une fois cela fait, rendez-vous dans le menu « Google Map API » et cliquez sur « Démarrer ».

Ensuite cliquez sur « Obtenir une clé ».

Après avoir validé une fenêtre de dialogue, vous arriverez sur la page de création de projet.

Vous cliquerez sur continuer après avoir choisi « Créer un projet ».

Créer un projet

Après quelques instants, vous aurez la possibilité d’obtenir votre clé.

Vous pourrez nommer votre clé : remplacer le nom « Clé API 1 » par celui de votre choix.

Vous devrez ensuite, restreindre l’accès à cette clé en choisissant le référent http (sites web)

url.com
url.com/*
*.url.com/*

Où vous remplacez url.fr par votre adresse

Par exemple :

afi-aveyron.fr
afi-aveyron.fr/*
*.afi-aveyron.fr/*

Cliquez ensuite sur « enregistrer » et vous aurez une boite de dialogue qui vous donnera le précieux sésame.

Cle API Google Map

Activer Google Maps Javascript Api and Javascript Geocoding Api

Vérifier que ces deux options sont activées.

Cliquez sur « Bibliothèque »

Bibliothèque

et dans « API Google Maps, cliquez tout d’abord sur :

  • Google Maps JavaScript API et activer le service si ce n’est déjà fait.
  • Puis sur Javascript Geocoding Api et activer le service si ce n’est déjà fait

Une fois cela réalisé, vous pouvez afficher votre carte Google sur votre site.

Exemple avec le thème DIVI

Je vous propose un exemple avec le thème DIvi mais le procédé est le même pour toutes les extensions « Carte » : vous devez renseigner la clé API dans les options soit de l’extension soit du thème.

Renseignez la clé API

Pour afficher une carte avec le thème Divi, vous devez renseignez votre clé API dans les «options du Thème.

Copier votre clé API dans « le champs Google API Key.

Option de Divi

Une fois cela réalisé, vous pourrez créer une carte sur une page.

Création d’une carte avec le module Map

Vous mettrez en place le module carte dans le Divi Buider

Module Carte

et tout d’abord  renseigner la vue générale de carte (ici Rodez).

Vue générale de carte

Puis vous « Ajouterez une nouvelle épingle », en choisissant :

  • Titre
  • Votre adresse en cliquant sur Trouvez
  • Des informations complémentaires dans le champs texte.

Paramètres du marqueur

Après avoir enregistré, votre carte sera visible.

Résultat

Qui suis-je ? David Roubertoux

Depuis plus de dix ans dans les métiers de l’informatique, j’ai a exercé la mission de formateur informatique et technicien dans des écoles primaires de l’Aveyron puis j’ai créée la société AFI Aveyron, organisme de formation professionnelle spécialisée dans le domaine des nouvelles technologies.