- 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
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
- 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.
Related articles: