Embed Google My Maps in Gutenberg
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 guide.
Want to embed a standard Google Map instead? See Embed Google Map in Gutenberg.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google My Maps map to embed
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.
Step 2: Install the Plugin and Add the Block
Install and activate the plugin
Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.
Open your page in the block editor
Go to the page or post where you want the map. Click Edit to open the Gutenberg block editor.
Add the Custom iFrame block
Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.
Step 3: Embed Google My Maps in Gutenberg
Paste the map URL
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.
Set the height
Set Height to at least 400px. Enable Auto Height to let the block resize with the map content.
Click Update or Publish. Your Google My Maps is now live on your WordPress site.
For all block settings, see the Set Up Custom iFrame in Gutenberg 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
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 My Maps in Elementor
Guide for the Elementor widget.
Embed Google Maps in Gutenberg
Embed a standard Google Maps location in Gutenberg.
Related Guides
Last updated today
Built with Documentation.AI