Embed Google Map in Gutenberg
Step-by-step guide to embed Google Map in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.
Overview
Custom iFrame lets you embed Google Map in Gutenberg by pasting a Google Maps embed URL into the block. Display locations, directions, and business addresses 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 Map in Elementor guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google Maps location to embed
Step 1: Get the Google Map Embed Link
Open Google Maps and find your location
Go to maps.google.com and search for the location you want to embed.
Open the Share menu
Click the Share button in the location panel.
Switch to Embed a map
Click the Embed a map tab. Click Copy HTML.
Extract the src URL
Paste the copied HTML into a text editor. Copy only the URL inside the src="..." attribute. It starts with https://www.google.com/maps/embed?pb=....
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 Map in Gutenberg
Paste the Google Maps src URL
Select the Custom iFrame block. In the Source field in the right panel, paste the Google Maps src URL you extracted. The map appears inside the block in the editor.
Set the height
Set Height to at least 400px for a clear map display. Values between 400px and 600px work well for most layouts.
Step 4: Adjust Settings and Publish
Scroll Bar: Disable scrollbars for a cleaner map presentation.
Refresh Interval: Leave off for static maps. Set a refresh interval only if the map content updates dynamically.
Smart Load: Turn on lazy loading so the map loads only when it enters the viewport. This helps with page performance.
Click Update or Publish. Your Google Map is now live on your WordPress site.
Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the Set Up Custom iFrame in Gutenberg guide for all block options.
This guide showed you how to embed Google Map in Gutenberg using the Custom iFrame plugin. From copying the embed link to pasting the src URL and publishing, the whole setup runs through the block editor without any code.
FAQ
No. The Google Maps embed code does not require an API key. Copy the embed HTML from Google Maps and paste the src URL directly into the Custom iFrame block.
The share link opens Google Maps in a new tab. The embed src URL (starting with https://www.google.com/maps/embed?pb=...) loads the map inside an iframe. Use the embed src URL in the Source field.
Confirm you pasted the src URL only, not the full HTML. The URL must start with https://www.google.com/maps/embed. See iFrame Not Showing for more help.
Yes. Custom maps created in Google My Maps use a different embed link. See the Embed Google My Maps in Gutenberg guide.
Also Available For
Embed Google Map in Elementor
Guide for the Elementor widget.
Embed Google Calendar in Gutenberg
Embed Google Calendar in the block editor.
Related Guides
Last updated today
Built with Documentation.AI