I recently worked with a customer to build a landing page for an in-person event they were hosting at a conference, and they needed to provide walking instructions to and from their event site on their ClickDimensions landing page. Creating an embedded Google Maps iframe is a great solution that not only allows you to provide a default route for your visitors to view, but also allows your visitors to interact with the map. This can be especially helpful if they need assistance finding their own way from a custom destination.
To get started, we have set up a basic landing page in the block editor with the content that surrounds our map. We have left an empty block in the middle of the page where the map will go.
With that set up, it’s time to create our map. We will go to Google Maps and enter our starting and ending addresses, and select the walking option. Now, it’s time to create our iframe for embedding.
Click on the hamburger icon at the top left corner of the Directions tab.
Then, select the share or embed option from the menu.
A new dialogue will pop up. Click on Embed a Map.
The view will change to show a text field with code for an iframe pre-populated. Here, you have the option to change the size of your iframe, if you know exactly what size it needs to be. If you don’t, you can change it in the code later. In this example, we will address this in our embed code on the landing page, so keep reading.
Go ahead and click Copy HTML.
With the iframe copied to your clipboard, go back to the landing page editor, find the block that we left open for the map, right click and select Add Content.
In the next view, select the HTML block and click Next.
Then, switch to the HTML view for the content component.
From this view, we are ready to paste our iframe. Paste in the iframe and then look for the iframe attributes for width and height.
This is where we can change the width and height of our iframe element directly from the code. Since we want this to reach the full width of the page, we’re going to set the width to 790. This will vary based on the settings in your landing page. In this specific case, the container width is set to 800px and there is a column gap of 10px. This means we have 790px to fill to cover the width of the available space. For aesthetic purposes, we want to approximate a 16:9 window. So, I’m going to follow up changing my width by setting the height to 400px.
With these customizations made, you can finish editing the component, and you’re good to go. Our finished product should look something like this:
Now, when customers arrive at your registration page, they find a well-styled, interactive guide to finding your event once they’re on site. If they’re coming from a hotel or another location, they have the flexibility to check directions from their own originating location without having to leave your registration page.