Pré-requis : 

  • Pour créer une landing page, c'est par ici

Vous avez crée une Landing page pour l'inscription à un événement et souhaitez y ajouter la localisation ? 

C'est très simple ! 

  1. Récupérer le code d'intégration

Dans Google Maps, renseignez votre adresse.
Puis cliquez sur "Partager" et dans la pop up, sélectionnez "Intégrer une carte"

Vous trouverez là le contenu HTML à récupérer

Vous obtenez un code qui ressemble à ceci :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1518619513145!2d2.3505876154926337!3d48.87438147928909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fbe448dd087%3A0x6b19709e22838330!2sPlezi!5e0!3m2!1sfr!2sfr!4v1534941422720" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

2. Intégrer le code dans votre Landing Page

Dans votre éditeur de Landing Page, sélectionnez le bloc HTML. 

Cliquez sur </> Code, puis remplacer le code donné en exemple par celui que vous avez récupéré. 

Et voilà ! En quelques clics, vous avez intégré votre map à votre landing page. 

Pour aller + loin : 

La map va naturellement s'aligner sur votre LP. Pour la mettre au centre, il vous fait ajouter / modifier quelques fragments de codes :

Ainsi, pour la centrée, voici le code reformulé : 

<div style="text-align:center">
                    <p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1518619513145!2d2.3505876154926337!3d48.87438147928909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fbe448dd087%3A0x6b19709e22838330!2sPlezi!5e0!3m2!1sfr!2sfr!4v1534941422720" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen=""></iframe></p>
                    </div>

Pour cela : 

-Ajouter en début de code : <div style="text-align:center">
-Remplacer : "width="600" par width="100%"


Avez-vous trouvé votre réponse?