How to Embed Google Maps in WordPress (3 Methods)

Q: 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.

Embedding Google Maps on your WordPress site is one of those tasks that sounds simple but has more nuance than you'd expect. The approach you choose matters, from a simple contact page map to office directions or a full store finder.

This guide walks through three methods for embedding Google Maps in WordPress, from the simplest copy-paste approach to the full API setup. We'll also cover the common gotchas that trip people up and explain why a simple embed might not be enough if you have more than one location.

#Why Embed Google Maps on Your WordPress Site?

Before we get into the how, let's talk about the why. Adding a map to your website isn't just a nice visual touch. It serves real business purposes:

Reduce support requests. When customers can see exactly where you are and get directions with one click, your "How do I get to your office?" emails drop significantly.

Build trust. A visible map with your physical address tells visitors your business is real, established, and accessible. This matters especially for local businesses competing with online-only alternatives.

Improve local SEO. Google considers your website's location signals when ranking local searches. An embedded map with your address reinforces your geographic relevance.

Increase foot traffic. The easier you make it for people to find you, the more likely they are to actually show up. Mobile users in particular expect to tap and get directions instantly.

#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," set it to "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 four 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

#Pros and Cons of the Embed API

Pros:

Multiple display modes (place, directions, search, 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 can be installed without a WordPress plugin. It provides search and filtering, with analytics available from Pro.

#Using an Embed on WordPress

You manage your locations in StoreRocket's dashboard, and your WordPress site displays them. If you switch themes, migrate hosts, or rebuild your site, your store locator keeps working. Your data lives independently of your WordPress installation.

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.

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

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

Try StoreRocket free for 7 days and see how a real store locator compares to a basic embed. No plugin to install, just connect your own map key, and your map will work on any WordPress theme.