How do I properly embed a Google Map in my WordPress site?

General
1

I’m trying to embed a Google Map into a WordPress page using the iframe code from Google Maps, but it either doesn’t show up at all or breaks the layout on mobile. I’m not sure if I should use a plugin, custom HTML block, or something in my theme settings. Can someone walk me through the correct way to embed a responsive Google Map in WordPress and avoid common issues?

2

This usually comes down to two things: how you paste the iframe, and how you make it responsive.

Here is the clean way that tends to work on most themes.

  1. Get the correct embed code from Google Maps
    • Open your place in Google Maps
    • Click “Share”
    • Go to “Embed a map”
    • Copy the iframe code, it starts with:

    <iframe src='https://www.google.com/maps/embed?pb=...'

  2. Use a Custom HTML block in Gutenberg
    • Edit the page
    • Add a “Custom HTML” block
    • Paste the iframe code there
    • Do not use the Visual editor for this block
    • Update and check front end

  3. Make it responsive for mobile
    The default width/height in the iframe causes layout issues on small screens.
    Wrap the iframe in a container with CSS.

    In the Custom HTML block, use:

    Then add this CSS to your theme:

    .map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }

    .map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    You can add the CSS in:
    Appearance > Customize > Additional CSS.

  4. Check for theme or page builder conflicts
    • If you use Elementor, Divi, WPBakery, etc, use their “HTML” or “Code” widget instead of the default editor
    • Disable any “security” or “content filter” plugin that strips iframes, then test
    • Some old themes strip iframes from the Classic Editor. In that case, use Gutenberg Custom HTML block or a page builder widget

  5. When to use a plugin
    A plugin helps if:
    • You want multiple maps with markers, custom styles, etc
    • You do not want to touch HTML or CSS
    Look at “WP Google Maps” or “MapPress Maps for WordPress”. They output responsive maps and usually avoid layout breakage.

If the map does not show at all:
• View source and check if the iframe is missing, then your editor or plugin strips it
• If the iframe is there but blank, check browser console for mixed content errors, and ensure the src starts with https, not http.

That combo, Custom HTML block plus responsive wrapper CSS, fixes the map for most WordPress installs and stops it from nuking the mobile layout.

3

If the iframe is vanishing or wrecking your mobile layout, it’s usually not Google’s fault, it’s WordPress being “helpful.”

@nachtschatten already covered the clean Custom HTML + responsive wrapper route, which is solid. I’ll throw in a few alternative angles and some “why the heck is this broken” checks so you’re not stuck trying the same thing ten times.

1. First: check if WordPress is stripping the iframe

Before tweaking layouts, make sure the map actually survives the editor.

  • Switch the editor to “Code editor” (Gutenberg) and paste your iframe.
  • Update the page.
  • Reopen the editor, go back to “Code editor” and check if your iframe is still there.

If it’s gone:

  • Some security plugins (Wordfence, iThemes, etc) or “hardening” plugins block iframes. Temporarily disable them and test.
  • Some old themes / page builders filter iframes in the main text area. Use a dedicated “HTML” or “Code” widget from your page builder instead.

If the iframe is present in the page source but still not showing in the browser:

  • Open DevTools > Console and check for:
    • Mixed Content errors (map is http, site is https). Fix: change the src to https://...
    • X-Frame-Options related stuff (rare with Maps, but if you copied the wrong embed URL, it can happen).

2. If mobile layout is breaking but the map shows on desktop

This is where I kind of disagree slightly with @nachtschatten: the 56.25% ratio (16:9) is nice, but it’s not always great for maps. Sometimes a taller map just feels better on mobile.

Alternative CSS so the map is just responsive height-wise without forcing a video-style ratio:

.map-wrap {
  width: 100%;
  max-width: 100%;
}

.map-wrap iframe {
  width: 100%;
  height: 350px; /* tweak for mobile */
  border: 0;
}

HTML:

<div class='map-wrap'>
  <iframe
    src='https://www.google.com/maps/embed?pb=YOUR_LONG_URL'
    loading='lazy'
    referrerpolicy='no-referrer-when-downgrade'
    style='border:0;'
    allowfullscreen=''>
  </iframe>
</div>

Then optionally add a media query:

@media (max-width: 480px) {
  .map-wrap iframe {
    height: 250px;
  }
}

Less fancy, but easier to reason about.

3. If you’re using a page builder, stop fighting Gutenberg

You mentioned maybe using a plugin or custom HTML. If you already have Elementor / Divi / WPBakery:

  • Drop in their “HTML” / “Code” widget, not a regular text widget.
  • Paste only the iframe, don’t wrap it in <p> tags or anything.
  • Turn off any “sanitize output” setting in that widget if it exists.

Builders often handle responsive iframes better than the main content area, so let them do the work instead of mixing systems.

4. When a plugin actually does make sense

I’m not a “install a plugin for everything” person, but in a few cases a map plugin is easier than hand-rolled iframes:

  • You want multiple markers, custom icons, routes.
  • You want to re-use the same map on 10 pages.
  • A client will edit content and absolutely will break the iframe.

In that case, something like WP Google Maps / MapPress etc is fine. They output shortcodes, which are less likely to get nuked by editors or filters. Slight overhead, but lower chance of “it just disappeared again.”

5. Quick sanity checklist

Run through this in order:

  1. View page source:
    • Is the iframe there? If no, editor/plugin stripped it.
  2. Check console:
    • Mixed content or blocked iframe? Make sure it’s https.
  3. Temporarily switch to a default theme (Twenty Twenty-Four):
    • If map works there, your theme’s CSS/layout is the culprit.
  4. Disable security / content filter plugins one by one and test.
  5. Try putting the map in a blank test page with only a Custom HTML block or a single page-builder HTML widget.
    • If it works there but not on the original page, that page’s layout/columns/shortcodes are messing it up.

Once you confirm it displays in a simple test page with a plain wrapper, you can slowly reintroduce your usual layout until you find the thing that breaks it.

It’s not glamorous, but that “strip everything to bare bones then add stuff back” pattern usually finds the exact issue a lot faster than randomly re-pasting the iframe 20 times.