> 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 Elementor

Step-by-step guide to embed Google Map in Elementor using the Custom iFrame WordPress plugin. No API key needed. No coding required.


## Overview

Custom iFrame lets you embed Google Map in Elementor by pasting any Google Maps embed URL into the widget. 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 Gutenberg WordPress instead? Follow the [Embed Google Map in Gutenberg WordPress](/gutenberg/google/embed-google-maps) guide.

Want to embed a custom map instead? See [Embed Google My Maps in Elementor](/elementor/google/embed-google-my-maps).

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Google Maps location to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/Et4IwIT1hO8"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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). Search for the location you want to embed.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776951870/elementor/google/google-maps/get-google-map-link-1.webp"
      alt="Google Maps search results showing a location pin on the map ready to share"
      width="1024"
      height="518" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open the Share menu" icon="share-2" title-type="p">
    Click the **Share** button in the location panel.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776951872/elementor/google/google-maps/get-google-map-link-2.webp"
      alt="Google Maps location panel showing the Share button highlighted"
      width="1024"
      height="515" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Switch to Embed a Map" icon="code" title-type="p">
    Click the **Embed a map** tab. Click **Copy HTML**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776951874/elementor/google/google-maps/get-google-map-link-3.webp"
      alt="Google Maps share dialog showing the Embed a map tab with Copy HTML button"
      width="1024"
      height="518"
    />
  </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=...`.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776951877/elementor/google/google-maps/get-google-map-link-4.webp"
      alt="Text editor showing the Google Maps embed HTML code with the src URL highlighted"
      width="1024"
      height="518"
    />
  </Step>
</Steps>

## Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the map. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337"
    />
  </Step>
</Steps>

## Step 3: Embed Google Map in Elementor

<Steps>
  <Step title="Paste the map URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Google Maps `src` URL into the **Source URL** field. The map appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776951879/elementor/google/google-maps/paste-google-map-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Google Maps URL in Source URL field with live map preview"
      width="1024"
      height="412"
    />
  </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: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

<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 fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Google Map in Elementor using the Custom iFrame plugin. From copying the embed link to pasting the URL and publishing, the whole setup runs through the Elementor 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 widget.
  </Expandable>
  <Expandable title="What is the difference between the share link and the embed src URL?" default-open="false">
    The share link (e.g. `maps.app.goo.gl/...`) 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 URL 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 Elementor](/elementor/google/embed-google-my-maps) guide.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Map in Gutenberg WordPress" href="/gutenberg/google/embed-google-maps" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Google My Maps in Elementor" href="/elementor/google/embed-google-my-maps" icon="map" horizontal={false}>
    Embed custom maps created in Google My Maps.
  </Card>
</Columns>

## Related Guides

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