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.

Want to embed a standard Google Map instead? See Embed Google Map in Elementor.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A Google My Maps map to embed

Video Tutorial

Step 1: Get Your Google My Maps Link

Open Google My Maps

Go to mymaps.google.com. Open an existing map or create a new one.

Copy the map URL

Click the three-dot menu on your map. Click Share. Copy the map link from the share dialog.

Your Google My Maps must be shared publicly. Go to Share and set access to Anyone with the link before copying the URL.

Open your page in Elementor

Go to the page where you want the map. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 3: Embed Google My Maps in Elementor

Paste the map URL

In the Content tab, paste your Google My Maps URL into the Source URL field. The map appears in the editor.

Custom iFrame widget in Elementor editor showing Google My Maps URL in Source URL field with live custom map preview of multiple locations

Set the height

Set Height to at least 400px. Enable Auto Height to let the iFrame resize with the map content.

Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 5: Save and Publish

Click Update or Publish. Your Google My Maps is now live on your WordPress site.

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the Set Up Custom iFrame in Elementor 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

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.

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.

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 for more help.

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.

Also Available For

Embed Google Map in Elementor

Embed a standard Google Maps location.

Embed Google Calendar in Elementor

Embed Google Calendar in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI