> 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 Elementor

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


## Overview

Custom iFrame lets you embed Google My Maps in Elementor by pasting any custom map URL into the widget. 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 Gutenberg WordPress instead? Follow the [Embed Google My Maps in Gutenberg WordPress](/gutenberg/google/embed-google-my-maps) guide.

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

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Google My Maps map to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/leRGTxi-8lU"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the map. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Google My Maps in Elementor

<Steps>
  <Step title="Paste the map URL" icon="clipboard" title-type="p">
    In the Content tab, paste your Google My Maps URL into the **Source URL** field. The map appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776953033/elementor/google/google-my-maps/paste-google-my-maps-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Google My Maps URL in Source URL field with live custom map preview of multiple locations"
      width="1920"
      height="734" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 400px. Enable **Auto Height** to let the iFrame resize with the map content.
  </Step>
</Steps>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Google My Maps in Elementor using the Custom iFrame plugin. From copying the map share link to pasting the URL and publishing, the whole setup runs through the Elementor 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 Gutenberg WordPress" href="/gutenberg/google/embed-google-my-maps" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Google Map in Elementor" href="/elementor/google/embed-google-maps" icon="map-pin" horizontal={false}>
    Embed a standard Google Maps location.
  </Card>
</Columns>

## Related Guides

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