Embed Google Services in Gutenberg

Guides for embedding Google Maps, Google My Maps, and Google Calendar in Gutenberg using the Custom iFrame WordPress plugin. No coding required.

Overview

Custom iFrame lets you embed Google services in Gutenberg including Google Maps, Google My Maps, and Google Calendar. Paste the embed URL into the block. No API keys, no shortcodes, no coding required.

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 Services in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
An embed URL from the Google service you want to display

How to Embed a Google Service in Gutenberg

All Google embeds follow the same three-step process.

Step 1: Get the Embed Link

Open the Google service

Go to Google Maps, Google My Maps, or Google Calendar and open the content you want to embed.

Copy the embed URL

Use the share or embed option in the service to get the embed URL. Copy only the src URL, not the full HTML.

Each platform guide below shows exactly where to find the embed link.

Step 2: Add the Custom iFrame Block

Open your page in the block editor

Go to the page or post where you want the Google embed. 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: Paste the URL and Publish

Paste the embed URL

In the right panel, paste the embed URL into the Source URL field. The map or calendar appears inside the block.

Set height and publish

Set Height to at least 400px for maps, or 600px for calendars. Click Update or Publish.

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

Supported Google Services

Select your service for a step-by-step embed guide.

Embed Google Maps in Gutenberg

Display any location with a fully interactive Google Map.

Embed Google My Maps in Gutenberg

Embed custom maps built in Google My Maps.

Embed Google Calendar in Gutenberg

Show booking pages and schedules from Google Calendar.

Also in Elementor

All Google services are also supported in the Elementor widget editor.

See Embed Google Services in Elementor for all Elementor guides.

Was this page helpful?

Last updated today

Built with Documentation.AI