Intégrer un plan Google Map responsive dans son site Internet

11 novembre 2017 |   |  , ,

Intégrer un plan Google Map responsive dans son site Internet

Il est courant qu'en pied de page d'un site on souhaite mettre un plan Google Map sur son site Internetmais pas une copie d'écran, le vrai plan zoomable !

Voici une procédure pour intégrer se plan afin qu’il soit responsive.

Etape 1 : Préparer sa page ou son widget pour accueillir le plan

1 – Il faut d’abord créer un widget libre (si vous désirez que ce soit en page d’accueil) ou vous placer à l’endroit désiré dans votre page.

2 – Cliquez ensuite 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>

Etape 2 : Récupérer le plan directement sur Google MAP

3 – Rendez-vous (sur un autre onglet du navigateur) sur Google Map cherchez la bonne adresse

4 – Cliquez sur “Partager”

5 – Puis “Intégrer”

6 – Copiez l'url présente entre les guillemets de la balise src de Google

gmap

Dernière étape : Finaliser et intégrer ce plan

7 – Dernière étape : collez cette url dans le src du code que vous venez de coller à la place des “…”

Le tour est joué, c'est responsive et interactif !

Aller plus loin …

Cette méthode vous permet d’intégrer toute sorte de plan google, ainsi vous pouvez créer vos propre cartes et les intégrer dans la zone désirée de votre site.

Vous pouvez aussi utiliser ce code pour insérer dans votre site Internet n’importe quelle autre page d’un autre site Internet, c’est utile dans de nombreux cas :

  • afficher un fichier pdf dynamique
  • intégrer un formulaire ici d’une autre page
  • afficher une zone d’un autre site
  • etc.