...

Comment intégrer google map dans son site ?

Google maps est un service de Google très utile qui vous permet visuellement d’afficher votre emplacement géographique sur votre site. Dans cet article nous allons vous présenter comment intégrer Google maps sur votre site internet.

Pourquoi intégrer une carte Google maps sur son site web ?

Intégrer une carte Google maps sur son site web permet de donner à vos visiteurs votre position géographique exacte.

Qu'est ce qu'une clé API ?

Une clé API ou Applications Programming Interface est une interface de programmation qui permet de faire communiquer deux applications entres elles. Une clé API  permet d’identifier les utilisateurs et leurs droits pour se servir de l’API.

Pourquoi faut-il une clé api pour afficher une carte google maps?

Cette étape est nécessaire car elle permet de sécuriser le transfert de données entre un site et la plateforme de Google. En effet pour pouvoir utiliser le service et à chaque envoi de données une authentification est requise pour prouver que les informations sont bien issues du site internet et non d’une application ou service tiers.

https://youtu.be/0mho8MUw100
intégrer google maps sur son site
Dans ce tutoriel, nous allons vous expliquer pas à pas comment faire pour intégrer une carte Google maps sur un site wordpress avec le thème DIVI. Nous verrons les étapes suivantes en détail:
  • Etape 1: Obtenir une clé API Google maps
  • Etape 2: Sécuriser la clé API Google maps
  • Etape 3: Activer les options de localisation
  • Etape 4: Mettre à jour l’adresse de localisation
Comment intégrer google map dans son site ?

Etape 1: Obtenir une clé API Google maps

Comment obtenir une clé API ?

Pour obtenir une clé API google vous devez tout d’abord vous connecter à la plateforme de développement Google maps. Pour cela rechercher sur google: Google API, puis rendez vous sur le site et sélectionner Premier pas.
FbEIqznsUyIn1jTwu
Ensuite vous allez devoir activer Google Maps Plateform, ce qui se fait en 3 étapes: 

Créer un projet

Nommer d’abord votre projet puis cliquer sur créer.
zRyZhK3Nnjb4235ryN MsH710FisbvQ hiPq01UeHMMYq0YsyQTpzLGMhv 4gDvua15OsOzTrez 8E5YD5ykI5M7vtgb i1NNw9z2t0FQr8KEv AIGQDSwA58ptuz7TIvG ROD5

Configuer la facturation

Ensuite vous allez devoir renseigner toutes vos données de facturation comme votre adresse ou numéro de téléphone: Pour cela cliquez d’abord sur créer un compte de facturation puis renseigner toutes les informations demandées, choisissez ensuite votre mode de facturation (paiement par carte ou prélèvement bancaire) et enfin cliquer sur démarrer l’essai gratuit.
esqoseqisU2kwruRes95Vj Zp2ISKkKcJzV xsqmorl8 rY3sfQxt2WOintIwwzs0yEM WcYqzCeuyn9QfRnpFafJEy6Yx0

Sélectionner des produits

Cliquer ensuite sur Maps>suivant puis copier la clé API générée.
x8MsOP6vthzda2x4nW87NFNWlQwrTwefHHpO1CHYP60izZ4l8 k4ULlsvm2uHqO6 ZXtkO e77sAhma9Se 9kVTq7eh8jEr6EqhEADywrOHoVlmo ncF2ENAWUMjODtPfb 6c4I9
Coller-la dans votre back office wordpress.
L3ZLAUcWjlbgGwGgp5qXWWt3sGOjKJH05JDgXcB9USOUreFUqFVKY178XDRt255rACBgU4px0X1Eq4 VmdPMtws bQRvAOmoqfnRwKv7Ri yeVlqfbEY

Etape 2 : Sécuriser la clé API Google maps

Pour sécuriser une clé API, cliquez tout d’abord sur le bouton sécuriser les identifiants, puis dans l’onglet Nom indiqué un “nom personnalisé”. Ensuite dans l’onglet Restrictions relatives aux applications> Sélectionner l’option Référents HTTP (sites Web)> Cliquer ensuite sur ajouter un élément dans la section Restriction liées aux sites web>Copier/coller dans URL de provenance l’url de votre site en ajoutant une étoile devant: *monsite.com. Cliquer sur ok puis enregistrer.
google cloud platform pour intégrer google maps dans son site
47UuVJNiJWE0UcA87fwq8yr0ITeWpnAPfOgz MZIg7nEtbjHmzU6y09Dbd0r OLqw P9E25QMTCXmPatblbGol9gGJ
Erreur à éviter:  Renseigner bien l’url de votre site sans caractère supplémentaire (point, espace…) pour ne pas avoir d’erreur d’intégration.

Etape 3 : Activer les options de localisation

Pour activer les options additionnelles de localisation, cliquez tout d’abord sur API sur le bandeau de gauche>Puis dans la section API supplémentaires sélectionner et activer les options suivantes:
  • Geocoding API
  • Geolocation API
  • Places API
api pour intégrer google maps sur son site

Etape 4: Mettre à jour l’adresse de localisation

Pour mettre à jour votre adresse de localisation, vous devez par exemple activer le visual builder de votre thème wordpress> Ensuite dans la partie adresse principale de la carte> Renseignez votre adresse> Cliquez sur trouver.  Vous pouvez aussi si vous le souhaitez intégrer un marqueur en répétant l’opération précédente. Quand vous avez fait vos modifications n’oubliez pas de cliquer sur valider.
intégrer google maps sur son site avec un marqueur
Nous espérons que ce tuto vous a plus et que vous savez maintenant intégrer une carte google maps sur votre site. Si vous avez toujours des difficultés, n’hésitez pas à contacter notre agence pour vous aider dans l’intégration du service google maps ou pour améliorer votre référencement local. /

À la recherche d'une agence digitale ?

RG Design aide les entreprises à booster leur croissance en maximisant le retour sur investissement de leurs campagnes SEO, SEA, SMA.
Discutons de votre projet !

Dans la même catégorie :

Comment réussir votre migration SEO ?

Comment réussir votre migration SEO ?

Vous avez un projet de refonte de votre site web ? Vous souhaitez par conséquent réussir votre migration SEO ? Vous vous posez des questions sur la meilleure façon de procéder ? Vous avez peur de faire des erreurs qui pourraient nuire à votre référencement ? En effet,...

lire plus
Comment optimiser son site WordPress pour mobile ?

Comment optimiser son site WordPress pour mobile ?

Aujourd'hui, on retrouve sur le web, beaucoup de site internet uniquement optimisé pour ordinateur. C'est bien dommage, car de nos jours le nombre de recherche venant des mobiles ne cesse d'augmenter. Que ce soit pour des sites e-commerce, mais encore pour un site...

lire plus
Comment améliorer votre référencement PrestaShop ?

Comment améliorer votre référencement PrestaShop ?

Vous ne savez pas comment améliorer le référencement PrestaShop de votre site e-commerce ? Vous souhaitez prochainement créer un site e-commerce, mais vous ne savez pas si cette solution vous conviendra ? Découvrez les conseils et recommandations de l'équipe RG Design...

lire plus