How do I embed Google Maps in my site?

In this guide, we show you how to embed Google Maps in your Website Builder site with the Code component.

Step 1 - Find the location on Google Maps

Step 2 - Click Share or embed map

Step 3 - Click Embed a map

Step 4 - Choose a size and copy HTML

Step 5 - In Website Builder, drag the Code component in the page

Step 6 - Paste the code

Step 7 - Adjust settings

Step 8 - Save, Preview and Publish

Don't have access to Website Builder? You can try it out for free for 14 days and create a website in no time. Start your free trial now

Step 1 - Find the location on Google Maps

Open Google Maps in your browser.
Enter the location that you want to embed in your site.
Next, click the Menu in the top left corner.

Step 2 - Click Share or embed map

In the menu that has opened, click Share or embed map.

Step 3 - Click Embed a map

In the Share popup that opens, click Embed a map.

Step 4 - Choose a size and copy HTML

By default, the size of the embedded map is 450 x 600. Click Medium in the top left corner to choose something else.
Click COPY HTML when you are done.

Step 5 - In Website Builder, drag the Code component in the page

Open Website Builder.
Select the page where you want to insert the code.
Drag the Code component in the workspace.

Step 6 - Paste the code

Paste the copied HTML code in the Code component.
Click Save.

Step 7 - Adjust settings

You can now adjust settings to customize how things will look in Website Builder and on your site.
Click Settings to open the floating menu for the code component.

The size you have set in the HTML code determines the size of the map on your site. We recommend adding the same size here, to help you with the placement of the component on your page.
Click Edit code to change the HTML code you entered.
Under Placement, you can determine if the component should be placed before the <head> or <body> tag. Select Normal for Google Maps.
You can select to hide a component in Mobile view or move it all the way to the bottom.
Enter a Title for the component, for you to recognise it by in Website Builder. The title will not be visible on your site.

Step 8 - Save, Preview and Publish

Once you are done, click Save.
Click Preview to check how things will look.
If you are satisfied with the result, click Publish to make the map available on your site.