Insérer un plan Google Map dans un widget

19 septembre 2016 |   |  

gmap2Vous pouvez intégrer un plan Google map cliquable et zoomable en pied de page ou dans la colonne latérale de votre site internet. Cela permet aux internautes de vous géolocaliser d’un coup d’oeil. Puis, de cette manière, la map est responsive (elle s’adapte aussi bien sur un écran d’ordinateur que sur tablette ou bien sur un smartphone).

Voici la procédure :

1 – Il faut créer un widget Contenu libre

2 – Cliquez sur l’onglet “Texte” de l’éditeur de texte (à côté de “Visuel“)

texte

et copiez-collez le code suivant :

<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item " style="border: 0;" src="..."></iframe></div>

3 – Rendez-vous ensuite sur Google Map et saisissez votre adresse postale

4 – Cliquez sur le bouton “Partager”

5 – Puis sur le lien “Intégrer la carte”

6 – Copiez l’url présente entre les guillements de la balise src de Google. C’est à dire le lien visible après

<iframe src="

7 – Collez cette url dans le src du code que vous venez de coller à la place des “…” présents après src=”

gmap

8 – Revenez sur le côté “visuel” de votre éditeur de texte

9 – Enregistrez puis aller voir sur le site côté public si la carte fonctionne bien

Le tour est joué, votre plan est responsive et interactif !