How to embed a Google Map in WordPress (and what the embed cannot do)

Google gives you the code. WordPress has a block that takes it. There is no plugin in between, no account to create, and the whole job runs about five minutes.

That is the short version, and for most people it is the right answer. If what you need is one pin on a contact page so visitors can find the front door, the iframe from Google’s Share panel does exactly that. Nothing further down this page should talk you out of it. Install nothing.

The rest of the post is the part most guides skip: the responsive fix that stops the map hanging off the edge of a phone, the five reasons an embed fails to show up, and a plain list of what the iframe cannot do. We do not mention our own plugin until you have a working map.

---

What “embed” means here

Embed is Google’s own word for it. Open a location in Google Maps, click Share, and the second tab is Embed a map. What it hands over is an <iframe>: a window on your page that loads a small Google Maps view from Google’s servers.

Worth being precise about what that is not. It is not a plugin, and it is not the Maps JavaScript API. It needs no API key, no Google Cloud project, and no billing account. Google’s Maps Embed API is a separate keyed product for developers; the code on the Share panel is not it. You copy, you paste, you publish.

---

Copy the embed code from Google Maps

1. Search the place at google.com/maps. A business name gives you a listing pin with the name attached; a street address gives you a plain address pin. They produce different embeds, so search the one you actually want.
2. Set the view before you copy. Zoom in or out, switch to satellite if that is what you want, drag until the framing looks right. The embed captures the view that is on screen.
3. Click Share. On desktop it sits in the left panel under the place name.
4. Choose the “Embed a map” tab.
5. Pick a size: Small, Medium, Large, or Custom size. This only sets the width and height attributes, and the responsive fix further down replaces them anyway.
6. Click COPY HTML.

What lands on your clipboard looks like this, with a much longer pb value:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9!2d..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

---

Paste it into a page in the block editor

Open the page, put the cursor where the map goes, type /html and press return. That is the Custom HTML block, and it is the core block that keeps an iframe intact. The slash command is faster than hunting through the inserter. Paste.

The block has a Preview toggle above it. Flip to Preview and the map renders right there in the editor. If it renders in Preview, it will render on the front end. Publish.

---

The other places the same code goes

Nothing above is specific to a page.

• Widget areas. In a classic theme, Appearance → Widgets has been block-based since WordPress 5.8, so drop a Custom HTML block into a sidebar or footer area and paste the same code.
• Template parts. In a block theme, open Appearance → Editor, edit the footer or any template part, and add a Custom HTML block there. The map then appears everywhere that part is used.
• The classic editor. Use the Text tab, not Visual. Visual will escape the tags and show you the code as words.

Every one of those is core WordPress behavior. A Custom HTML block holds an iframe; none of this is a map feature belonging to any plugin.

---

Make it responsive

This is the step that separates a finished job from a broken one. Google’s iframe carries width="600" and height="450" as HTML attributes. Six hundred pixels is wider than the content column on most phones, so the map runs off the side and can drag the whole page with it.

The fix is a wrapper with a fixed shape and an iframe told to fill it:

<div class="map-embed">
  <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

/* the wrapper holds the shape */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* the iframe fills it, whatever the attributes say */
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

You can leave Google’s width and height attributes in place; the CSS wins. Change 16 / 9 to 4 / 3 or 1 / 1 for a taller map. The aspect-ratio property has been supported across current browsers for years, so no padding hack is needed.

Where the CSS goes: in a block theme, Appearance → Editor → Styles, then Additional CSS in the three-dot menu. In a classic theme, Appearance → Customize → Additional CSS. Keep loading="lazy" on the iframe either way.

---

Change what the map shows

One rule covers most of this: the embed freezes whatever was on screen when you copied it. Zoom, center, satellite or map view, all of it is packed into that pb string. To change any of it, go back to Google Maps, set the view again, and copy a fresh iframe. Do not try to edit pb by hand. It is a positional encoding, not a list of named parameters, and a wrong character gives you a blank frame.

Two variants are worth knowing. A place embed centers on one location and shows its pin. A directions embed is what the same Embed a map tab gives you after you share a route with a start and an end, and the iframe then shows that route. Both are Google features, and if a visitor needs turn-by-turn, Google Maps is where they get it.

---

When the map does not appear

Five causes, in the order they actually happen:

1. It went into a Paragraph block. The code shows up as visible text instead of a map. Delete it and use /html.
2. The iframe was stripped on save. WordPress filters HTML for users without the unfiltered_html capability, and iframes are among the first things to go. On multisite, only super admins hold it. Ask whoever owns the site to paste it, or check whether a security plugin is doing the filtering.
3. A consent or cookie script is blocking it. Many consent tools rewrite third-party frames into a placeholder until a visitor accepts. That is the tool working as designed. Add Google Maps to whatever category the tool asks about.
4. The src got retyped as http://. On an HTTPS page the browser treats that as mixed content and refuses to load the frame. Leave the URL exactly as Google produced it.
5. A cache is serving the old page. Purge the page cache and any CDN cache, then load it in a private window.

---

The privacy question nobody mentions

The embed loads content from Google on every single page view, whether or not a visitor ever looks at the map. That means a request to Google carrying the visitor’s IP address and the page they were on.

This is not legal advice, and we are not going to pretend otherwise. It is worth raising with whoever maintains the site’s privacy notice and cookie banner, before someone else raises it for you. If the site already discloses embedded third-party content, this belongs in the same paragraph.

---

What the iframe cannot do

None of this is a criticism of a free tool that does its job. It is the ceiling of the method, and it is better to know it now:

• One location. One embed, one place. Ten branches means ten iframes.
• Google’s pin, in Google’s red. You cannot change its color or its shape.
• No popup of your own. Clicking the pin opens Google’s own card, not your hours or your phone number.
• No styling. The map looks like Google Maps. It will not pick up your palette, your dark mode, or your border radius.
• The click leaves your site. “View larger map” and the directions link both hand the visitor to Google Maps.

If you are weighing the iframe against the alternatives, that argument is already written up in how to add a map in WordPress, and there is no point restating it here.

---

If you hit one of those ceilings

Download Modern Maps (free), install the zip, activate it, and type /map on a page. It is a block, the same way the Custom HTML block is a block. Three presets (Light, Dark, Standard), markers with popups built from regular blocks, and a map that does not send the visitor anywhere.

Two honest notes before you do. The plugin route is not automatically simpler, because most map plugins will ask you for an API key and a billing account before they draw anything, which is the whole reason this one ships its own tiles. And Modern Maps does not display Google Maps, does not use Google tiles, and cannot read or import the embed you just pasted. Different map, built from scratch, so a switch means re-adding the location. If that sounds like more than you signed up for, a 60-second walkthrough shows the whole thing end to end.

A license key on that self-hosted build adds three things and only three: markers past the second, the advanced OKLCH color sliders that shape the map’s gradient, and theme-palette and marker colors that persist instead of resetting. The tiers, including the 5-site and 25-site licenses, are on pricing.

If you would rather install from the dashboard than upload a zip, search the plugin directory for Modern Maps Lite. That build has no marker limit at all, and no in-plugin upgrade path either, so moving to Pro later means switching to the download above.