Pre-requisite:

To create a landing page, take a look here.

Have you created a landing page for people to sign-up for an event, and do you want to add the location?

It’s very simple!

1. Get the embedding code

In Google Maps, enter the address.

Then click “Share” and in the pop-up, select “embed a map”

You’ll find the HTML content to copy and paste

You’ll get a code that looks like this:

<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. Integrate the code into your Landing Page

In your Landing Page editor, select the HTML block.

Click on </> Code, then replace the code given in the example by the code that you have copied.

There you go! In just a few clicks, you’ll have embedded your map into your landing page.

To go a little further:

The map will naturally align itself on your landing page. To centre it, you simply need to add/edit a few fragments of code:

So, to centre it, here is the modified code:

<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="450" frameborder="0" style="border:0" allowfullscreen=""></iframe></p>
                    </div>

To do this 🤓:

  • At the start of the code, add: <div style=”text-align:center”>
  • Replace: “width=”600” with width=”100%”
  • You have added a <div>, so as a careful coder, you must then close it by adding </div>
Did this answer your question?