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.

Want to embed a custom map instead? See Embed Google My Maps in Elementor.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A Google Maps location to embed

Video Tutorial

Step 1: Get the Google Map Embed Link

Open Google Maps and find your location

Go to maps.google.com. Search for the location you want to embed.

Google Maps search results showing a location pin on the map ready to share

Open the Share menu

Click the Share button in the location panel.

Google Maps location panel showing the Share button highlighted

Switch to Embed a Map

Click the Embed a map tab. Click Copy HTML.

Google Maps share dialog showing the Embed a map tab with Copy HTML button

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

Text editor showing the Google Maps embed HTML code with the src URL highlighted

Open your page in Elementor

Go to the page where you want the map. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor

Step 3: Embed Google Map in Elementor

Paste the map URL

In the Content tab, paste the Google Maps src URL into the Source URL field. The map appears in the editor.

Custom iFrame widget in Elementor editor showing Google Maps URL in Source URL field with live map preview

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: Customize and Configure Settings

For styling, smart loading, and advanced options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, borders, and more.

Step 5: Save and Publish

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 fine-tune widget behavior? See the Set Up Custom iFrame in Elementor 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

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.

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.

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

Also Available For

Embed Google My Maps in Elementor

Embed custom maps created in Google My Maps.

Embed Google Calendar in Elementor

Embed Google Calendar in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI