> 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 Map in Gutenberg WordPress

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](/elementor/google/embed-google-maps) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Google Maps location to embed

## Step 1: Get the Google Map Embed Link

<Steps>
  <Step title="Open Google Maps and find your location" icon="map-pin" title-type="p">
    Go to [maps.google.com](https://maps.google.com) and search for the location you want to embed.
  </Step>
  <Step title="Open the Share menu" icon="share-2" title-type="p">
    Click the **Share** button in the location panel.
  </Step>
  <Step title="Switch to Embed a map" icon="code" title-type="p">
    Click the **Embed a map** tab. Click **Copy HTML**.
  </Step>
  <Step title="Extract the src URL" icon="clipboard" title-type="p">
    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>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the map. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Google Map in Gutenberg

<Steps>
  <Step title="Paste the Google Maps src URL" icon="clipboard" title-type="p">
    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.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 400px for a clear map display. Values between 400px and 600px work well for most layouts.
  </Step>
</Steps>

## 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.

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

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the [Set Up Custom iFrame in Gutenberg WordPress](/getting-started/gutenberg-setup) 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

<ExpandableGroup>
  <Expandable title="Do I need a Google Maps API key?" default-open="false">
    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.
  </Expandable>
  <Expandable title="What is the difference between the share link and the embed src URL?" default-open="false">
    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.
  </Expandable>
  <Expandable title="The map shows blank. What should I check?" default-open="false">
    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](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed a Google My Maps instead?" default-open="false">
    Yes. Custom maps created in Google My Maps use a different embed link. See the [Embed Google My Maps in Gutenberg WordPress](/gutenberg/google/embed-google-my-maps) guide.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Map in Elementor" href="/elementor/google/embed-google-maps" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Calendar in Gutenberg WordPress" href="/gutenberg/google/embed-google-calendar" icon="calendar" horizontal={false}>
    Embed Google Calendar in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Google Services in Gutenberg - Overview](/gutenberg/embed-google-services)
- [Embed Google My Maps in Gutenberg WordPress](/gutenberg/google/embed-google-my-maps)
- [Embed Google Calendar in Gutenberg WordPress](/gutenberg/google/embed-google-calendar)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)