How to add a Google Map on a page using a Content widget.

What You’ll Learn

How to embed a Google Map on a page using a Content widget.

Why It Matters

Adding a map makes it easy for visitors to find your location, especially for offices, events, or physical storefronts. It adds credibility and convenience by providing directions right on your website.

---

Step-by-Step Instructions

1. Get the Embed Code from Google Maps

1. Open Google Maps and search for the location you want to display.
2. Click the Share button.
3. Select the Embed a map tab.
4. Copy the HTML code provided in the box.

---

2. Add the Map to Your Page

1. Log in to the backend and go to the page where you want the map to appear.
2. Click Edit to enter edit mode.
3. Drag a Content widget into the section where you'd like to display the map.
4. Click inside the content area to open the text editor.
5. In the editor toolbar, click the Source Code button (often shown as </>).
6. Paste the HTML code you copied from Google Maps.
7. If needed, adjust the width and height values in the code to better fit your layout.
8. Click OK to close the source code window.
9. Click the green checkmark button in the bottom-right corner to save the changes.

---

Troubleshooting Tips

• Map isn’t showing up

  Double-check that you pasted the full HTML embed code into the Source Code view—not the regular content area.

• Map looks too small or too large

  Edit the width and height values in the embed code to better fit your design.

• Accidentally removed content or broke layout

  Use the undo button or re-edit the content area and paste the embed code again. Make sure no other content is overwritten.

---