How do I get the embed (iframe) code for a Google Map?

If you want to display a map on your event website, you can embed a Google Map using an iframe embed code. This guide explains how to generate the embed code and how to add it to your website in ShowOff (our CMS).

Before you start

• You will need the address, venue name, or location you want to show on the map.

• Some locations (or custom maps) may have sharing restrictions that prevent embedding.

• Google Maps embeds usually work without any additional setup, but very high traffic sites may require extra configuration depending on your wider Google setup.

Step 1: Get the Google Map embed code

1. Open Google Maps in your browser.

2. Search for the venue or address you want to embed.

3. Select Share (this is usually in the location panel).

4. Select the Embed a map tab.

5. Choose the map size (Small / Medium / Large) if the option is available.

6. Select Copy HTML.

You will get an iframe embed code similar to this:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Step 2: Add the Google Map embed code to your website in ShowOff (CMS)

1. Grab the embed code using the steps above.

2. In ShowOff, open the page or panel where you would like the map to appear.

3. Insert the Third Party Code widget.

4. Paste the Google Map embed code into the widget.

5. Select Save (and publish if your workflow requires it).

Adjusting the width and height of the map

You can resize the embedded map by editing the width and height values in the iframe code.

Example:

<iframe src="https://www.google.com/maps/embed?pb=..." width="800" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Recommended sizing tips

• For most page layouts, a width between 600–1000px works well, depending on your content width.

• A height of 400–600px is usually a good starting point for readability.

• If the map looks too tall or too short, adjust the height first.

Making the map responsive (recommended for mobile)

If your widget supports it, you can make the map scale to the container by setting the width to 100%.

Example:

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Note: A fixed height is still required in most cases, unless you are using a responsive container or custom styling.

Common issues

The map is blank or does not load

This can happen if:

• The location is restricted, removed, or unavailable

• The embed code was truncated when pasted

• Browser privacy settings or blockers are preventing map content loading

The map is too small on mobile

Use width="100%" and increase the height to improve usability on smaller screens.

I can’t find “Embed a map”

Make sure you are using Google Maps (not My Maps), and try opening it in a desktop browser. Some views and devices display the options differently.