> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Google My Maps in Gutenberg WordPress

Step-by-step guide to embed Google My Maps in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.


## Overview

Custom iFrame lets you embed Google My Maps in Gutenberg by pasting any custom map URL into the block. Display store locations, travel routes, and custom pins on your WordPress page without an API key.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Google My Maps in Elementor](/elementor/google/embed-google-my-maps) guide.

Want to embed a standard Google Map instead? See [Embed Google Map in Gutenberg WordPress](/gutenberg/google/embed-google-maps).

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Google My Maps map to embed

## Step 1: Get Your Google My Maps Link

<Steps>
  <Step title="Open Google My Maps" icon="map" title-type="p">
    Go to [mymaps.google.com](https://mymaps.google.com). Open an existing map or create a new one.
  </Step>
  <Step title="Copy the map URL" icon="link" title-type="p">
    Click the three-dot menu on your map. Click **Share**. Copy the map link from the share dialog.
  </Step>
</Steps>

<Callout kind="info">
  Your Google My Maps must be shared publicly. Go to **Share** and set access to **Anyone with the link** before copying the URL.
</Callout>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the map. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Google My Maps in Gutenberg

<Steps>
  <Step title="Paste the map URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste your Google My Maps URL into the **Source URL** field. The map appears inside the block in the editor.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 400px. Enable **Auto Height** to let the block resize with the map content.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Google My Maps is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg WordPress](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Google My Maps in Gutenberg using the Custom iFrame plugin. From copying the map share link to pasting the URL and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="What is the difference between Google Maps and Google My Maps?" default-open="false">
    Google Maps embeds a standard location or directions view. Google My Maps lets you create fully custom maps with your own pins, routes, and layers. Both work with Custom iFrame, but each uses a different URL format.
  </Expandable>
  <Expandable title="Do I need a Google Maps API key to embed a custom map?" default-open="false">
    No. Google My Maps embed URLs do not require an API key. Copy the share link and paste it directly into the Source URL field.
  </Expandable>
  <Expandable title="My map shows blank. What should I check?" default-open="false">
    Confirm the map is set to public sharing. Go to **Share** in Google My Maps and set access to **Anyone with the link**. Private maps cannot be embedded. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed a map with multiple layers?" default-open="false">
    Yes. Google My Maps supports multiple layers and all of them appear in the embedded view. Visitors can toggle layers on and off directly in the embedded map.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google My Maps in Elementor" href="/elementor/google/embed-google-my-maps" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Maps in Gutenberg WordPress" href="/gutenberg/google/embed-google-maps" icon="map-pin" horizontal={false}>
    Embed a standard Google Maps location in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Google Services in Gutenberg - Overview](/gutenberg/embed-google-services)
- [Embed Google Maps in Gutenberg WordPress](/gutenberg/google/embed-google-maps)
- [Embed Google Calendar in Gutenberg WordPress](/gutenberg/google/embed-google-calendar)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)