How to Embed Google Maps in WordPress (3 Methods)

To embed Google Maps in WordPress, open your place on Google Maps, choose Share, then "Embed a map", copy the HTML and paste it into a Custom HTML block. It needs no API key, no billing account and no plugin, and it is free.

Use that for one location. For several locations that visitors need to search, a map with one pin is the wrong tool, and a store locator is the better fit. This guide walks through three methods, from the simplest copy-paste approach to the full API setup, and the common problems that trip people up. We make StoreRocket, so weigh our view with that in mind.

Related: How to add a store locator to WordPress | Google Maps optimization guide | Google Maps vs Mapbox

The short answer

• One location: the iframe embed (Method 1). Paste it into a Custom HTML block.
• A route, search or place view: the Embed API (Method 2), which needs a Google Cloud key.
• A plugin: check what map provider, billing and features it requires before you install it (Method 3).
• Several locations with search: a store locator, which you can add to WordPress with an embed code or the free StoreRocket plugin.

Only a few locations and no budget? You may not need a store locator at all. A free embedded map with a pin for each location is fine when the list is short, rarely changes and visitors only need to see where you are. Our guide to free store locator options compares them.

Why Embed Google Maps on Your WordPress Site?

A map with your address answers "where are you?" before a visitor has to ask, and a tap on directions gets them there. It also shows that your business has a real, findable location.

Method 1: Simple Iframe Embed (No API Key Required)

This is a simple way to add a Google Map to a WordPress page without writing code.

Step-by-Step Instructions

1. Go to Google Maps at google.com/maps and search for your business address or the location you want to display.

2. Click the Share button. Once the map shows your location, click the "Share" icon (it looks like a chain link or arrow, depending on your browser). You'll see two tabs: "Send a link" and "Embed a map."

3. Select "Embed a map." This generates an HTML iframe snippet. You'll see a size dropdown with options: Small (400x300), Medium (600x450), Large (800x600), or Custom size.

4. Choose your size and copy the HTML. Click "Copy HTML" to grab the embed code. It will look something like this:

 1<iframe
 2  src="https://www.google.com/maps/embed?pb=!1m18!..."
 3  width="600"
 4  height="450"
 5  style="border:0;"
 6  allowfullscreen=""
 7  loading="lazy"
 8  referrerpolicy="no-referrer-when-downgrade">
 9</iframe>

5. Paste into WordPress. In the WordPress editor (Gutenberg), add a "Custom HTML" block and paste the iframe code. If you're using the Classic Editor, switch to the "Text" tab and paste it there.

6. Make it responsive. The default iframe has fixed pixel dimensions, which means it won't resize on mobile. Wrap it in a container to fix this:

 1<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
 2  <iframe
 3    src="https://www.google.com/maps/embed?pb=!1m18!..."
 4    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
 5    allowfullscreen=""
 6    loading="lazy"
 7    referrerpolicy="no-referrer-when-downgrade">
 8  </iframe>
 9</div>

Pros and Cons of the Iframe Method

Pros:

• No API key needed
• No billing account required
• No plugin dependencies

Cons:

• Uses Google's standard embedded-map interface

This method suits a simple map on a contact page.

Method 2: Google Maps Embed API (For Developers)

If you need more control over how the map looks and behaves, the Google Maps Embed API gives you additional options while still using an iframe-based approach.

Setting Up the Embed API

1. Get a Google Cloud account. Go to Google Cloud Console and sign in. Create a new project for your website.

2. Enable the Maps Embed API. Navigate to "APIs & Services" then "Library." Search for "Maps Embed API" and enable it for your project.

3. Create an API key. Go to "APIs & Services" then "Credentials." Click "Create Credentials" and select "API Key." Copy the generated key.

4. Restrict your API key. This is critical for security. Under "Application restrictions," choose "Websites" (older docs call it "HTTP referrers") and add your domain (e.g., yourdomain.com/*). Under "API restrictions," limit it to "Maps Embed API" only.

5. Build your embed URL. The Embed API uses a structured URL format:

 1<iframe
 2  width="600"
 3  height="450"
 4  style="border:0;"
 5  loading="lazy"
 6  allowfullscreen
 7  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Your+Business+Name,City">
 8</iframe>

Embed API Modes

The Embed API supports five different modes:

Place mode shows a specific location with a pin:

 1/maps/embed/v1/place?key=KEY&q=Empire+State+Building,New+York

Directions mode shows route between two points:

 1/maps/embed/v1/directions?key=KEY&origin=JFK+Airport&destination=Manhattan

View mode shows a map area without pins:

 1/maps/embed/v1/view?key=KEY&center=40.7128,-74.0060&zoom=12

Search mode shows search results on the map:

 1/maps/embed/v1/search?key=KEY&q=coffee+shops+in+Brooklyn

Street View mode shows a Street View panorama:

 1/maps/embed/v1/streetview?key=KEY&location=40.7484,-73.9857

Pros and Cons of the Embed API

Pros:

• Multiple display modes (place, directions, search, view, Street View)
• More control over what appears on the map
• Can show directions or search results
• Still iframe-based, so easy to implement

Cons:

• Requires a Google Cloud account and API key
• Requires billing setup (even though the Embed API itself is free)

Method 3: WordPress Plugins

The WordPress plugin ecosystem offers dozens of Google Maps plugins. They range from simple embed wrappers to full-featured mapping solutions.

Search the WordPress plugin repository and verify the selected plugin's current map-provider, billing, and feature requirements before installation.

The Better Approach: Use a Dedicated Store Locator

If you have more than one location, compare the search, filtering, analytics, and management workflow you need.

StoreRocket works on WordPress by pasting its embed code, with no plugin needed. A free StoreRocket plugin from WordPress.org also adds the locator with a block or a shortcode. It provides address search and filters, with analytics depending on the plan.

Using an Embed on WordPress

You manage your locations in StoreRocket's dashboard, and your WordPress site displays them. Your locations live in your StoreRocket account rather than in your WordPress database, and after install a location change is made in the dashboard and the locator updates itself.

Check out our WordPress store locator guide for the full setup walkthrough, or see our features page to understand what a modern locator can do.

Common Issues and How to Fix Them

Map Not Showing Up

Check your embed code. The most common issue is pasting the code in WordPress's "Visual" editor instead of the "Text/HTML" editor. WordPress's visual editor can strip or mangle iframe tags. In Gutenberg, always use the "Custom HTML" block.

Check for HTTPS issues. If your site runs on HTTPS (and it should), make sure the iframe src also uses HTTPS. Google Maps embeds use HTTPS by default, but if you copied an older embed, it might have HTTP.

Check for Content Security Policy (CSP) headers. Some security plugins or hosting configurations block iframes from external domains. If your map isn't loading, check your browser's developer console for CSP errors. You may need to allowlist google.com and maps.google.com in your CSP settings.

Map Not Responsive on Mobile

The default Google Maps iframe uses fixed width and height attributes. On mobile screens, this either creates horizontal scrolling or the map overflows its container. Use the responsive wrapper shown in Method 1, or apply CSS:

 1.map-container {
 2  position: relative;
 3  padding-bottom: 56.25%;
 4  height: 0;
 5  overflow: hidden;
 6}
 7.map-container iframe {
 8  position: absolute;
 9  top: 0;
10  left: 0;
11  width: 100%;
12  height: 100%;
13}

Slow Page Load Times

Use the loading="lazy" attribute on the iframe to defer loading until it approaches the viewport.

 1<iframe src="..." loading="lazy" ...></iframe>

Test the page after adding the map and compare its loading metrics with your production theme and plugins.

Choose the Right Method for Your Needs

For a single location on a contact page, the basic iframe embed may be sufficient.

For multiple locations, compare the search, filtering, analytics, and branding workflows published by each option.

StoreRocket gives businesses with several locations a store locator for their own website: import your locations from a spreadsheet, match it to your brand and paste one embed code. Create your locator with a free trial, no credit card needed.

Frequently Asked Questions

Do I need a Google Maps API key to embed a map in WordPress?

No, not for the basic iframe embed (Method 1). You can get an embed code directly from Google Maps without any API key or billing account. You only need an API key if you're using the Embed API (Method 2), the JavaScript API, or most WordPress map plugins.

Can I embed Google Maps for free?

Yes. The basic iframe embed from Google Maps is completely free with no usage limits. The Embed API is also free but requires a Google Cloud billing account. The JavaScript API uses the Dynamic Maps SKU, which includes 10,000 free monthly loads before tiered charges apply.

What's the best way to show multiple locations on a WordPress map?

For multiple locations, compare options that publish search, clustering, and location-management features. A dedicated store locator is one approach.

Will embedding Google Maps slow down my WordPress site?

Measure the page before and after embedding the map. Use loading="lazy" on the iframe to defer loading, or use a static image linked to Google Maps if you do not need an interactive map.