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

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


## Overview

Custom iFrame lets you embed Google services in Elementor including Google Maps, Google My Maps, and Google Calendar. Paste the embed URL into the widget. 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 Gutenberg instead? Follow the [Embed Google Services in Gutenberg](/gutenberg/embed-google-services) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- An embed URL from the Google service you want to display

## How to Embed a Google Service in Elementor

All Google embeds follow the same three-step process.

### Step 1: Get the Embed Link

<Steps>
  <Step title="Open the Google service" icon="map-pin" title-type="p">
    Go to Google Maps, Google My Maps, or Google Calendar and open the content you want to embed.
  </Step>
  <Step title="Copy the embed URL" icon="link" title-type="p">
    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>
</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 Google embed. 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 editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

### Step 3: Paste the URL and Publish

<Steps>
  <Step title="Paste the embed URL" icon="clipboard" title-type="p">
    In the Content tab, paste the embed URL into the **Source URL** field. The map or calendar appears in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to at least 400px for maps, or 600px for calendars. Click **Update** or **Publish**.
  </Step>
</Steps>

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

## Supported Google Services

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

<Columns cols="2">
  <Card title="Embed Google Map in Elementor" href="/elementor/google/embed-google-maps" icon="map-pin" horizontal={false}>
    Display any location with a fully interactive Google Map.
  </Card>
  <Card title="Embed Google My Maps in Elementor" href="/elementor/google/embed-google-my-maps" icon="map" horizontal={false}>
    Embed custom maps built in Google My Maps.
  </Card>
  <Card title="Embed Google Calendar in Elementor" href="/elementor/google/embed-google-calendar" icon="calendar" horizontal={false}>
    Show booking pages and schedules from Google Calendar.
  </Card>
</Columns>

## Also in Gutenberg

All Google services are also supported in the WordPress block editor.

See [Embed Google Services in Gutenberg](/gutenberg/embed-google-services) for all Gutenberg guides.

## Related Guides

- [Embed Anything in Elementor](/elementor/embed-anything)
- [Elementor Widget Setup](/getting-started/elementor-setup)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)