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

General
1

I’m trying to embed a Google Map on a WordPress page using the standard iframe code from Google, but it either doesn’t show up correctly or breaks the page layout. I’m not sure if I should be using a plugin, the block editor, or some custom HTML. Can someone explain the correct, up-to-date way to embed a responsive Google Map in WordPress and avoid common issues?

2

This usually comes down to 3 things in WordPress:

  1. Where you paste the iframe
  2. The editor mode
  3. Theme or builder CSS messing with it

Here is a clean way to do it.

  1. Get the correct Google Maps embed code

    • Go to Google Maps
    • Search your address or place
    • Click “Share”
    • Go to “Embed a map”
    • Pick the size
    • Copy the iframe. It starts with:

  2. Use the right block in WordPress
    If you use the Block Editor (Gutenberg):

    • Edit the page
    • Add a “Custom HTML” block
    • Paste the iframe in there
    • Click “Preview” inside that block to check it
      Do not paste the iframe in a normal Paragraph block. It will break or get stripped.

    If you use the Classic Editor:

    • Switch from “Visual” to “Text” tab
    • Paste the iframe in the Text tab
    • Save and do not switch back to Visual for that section if WordPress keeps mangling it

  3. Fix layout and width issues
    If it shows up but breaks layout or looks tiny, wrap it or set styles.

    Try this in the Custom HTML block:

    Key points:

    • width=‘100%’ makes it responsive
    • max-width keeps it from stretching too wide
    • height is fixed so the map does not collapse

  4. Check for theme or builder conflicts
    If you use Elementor, Divi, WPBakery etc, use their “HTML” or “Code” module, not a text widget.
    Some themes set iframes to display: block with weird width.
    If the map is cut off, inspect with browser dev tools and see if something adds max-width: 300px or similar.

  5. Turn off embed filters if needed
    Some security plugins or page builders strip iframes.
    Quick test:

    • Create a new blank page
    • Use Custom HTML block
    • Paste the iframe
    • Publish
      If it still disappears, a plugin filters it.
      Temporarily disable security / content plugins one by one and retest.

  6. Plugin vs manual embed
    Manual iframe is fine for 1 to 3 maps.
    Use a plugin when:

    • You need many maps
    • You want custom markers, styles, clustering
    • You plan to maintain maps often

    Solid plugins:

    • “WP Google Maps”
    • “Maps Widget for Google Maps”
      These handle API keys, shortcodes, and responsiveness.

  7. Block editor “Map” block note
    The native “Map” block relies on other services and often needs an API key configuration. For a simple Google Map embed, the iframe method is more predictable.

If it still breaks layout, share:

  • Theme name
  • Page builder (if any)
  • Exact code you paste

Most times the fix is “use Custom HTML block and set width 100 percent with a wrapper div.”

3

What @voyageurdubois said covers the “how,” so I’ll just hit the “why is this breaking my layout” side and a couple alternatives.

Most of the time when a Google Maps iframe blows up a WP page, it’s not the iframe itself. It’s one of these:

  1. Theme/container sizing problems
    A lot of themes stick content in a .entry-content or .container with weird rules like:

    iframe {
  max-width: 300px;
  height: auto;
}

    That will crush your map or stretch it strangely.

    Quick check:

    • Open the page in Chrome
    • Right click on the map area → Inspect
    • Look at the “Styles” pane for any iframe rules coming from the theme
    • If you see something like max-width: 300px or height: auto, override it in Appearance → Customize → Additional CSS:
      .entry-content iframe[src*='google.com/maps'] {
  max-width: 100% !important;
  width: 100% !important;
  height: 450px !important;
}

  2. Flexbox or column layouts messing with aspect ratio
    If you drop the map into a two‑column layout (Gutenberg columns, Elementor, etc.), the parent might have:

    overflow: hidden;
aspect-ratio;
align-items: stretch;

    That can make the iframe look cut off or squashed.

    Easiest fix is to wrap it in a ratio container instead of trying to fight everything:

    <div class='map-wrap'>
  <div class='map-ratio'>
    <iframe
      src='YOUR_IFRAME_SRC_HERE'
      style='border:0;'
      loading='lazy'
      referrerpolicy='no-referrer-when-downgrade'
      allowfullscreen>
    </iframe>
  </div>
</div>

    Then in Additional CSS:

    .map-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.map-ratio {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

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

    That gives you a responsive, non‑janky map regardless of columns.

  3. Gutenberg filtering your code
    Even in a Custom HTML block, some setups still “sanitize” iframes. If your map keeps vanishing after save, that’s usually:

    • A security plugin
    • A “hardened” hosting setup

    Instead of disabling everything, you can:

    • Use a shortcode and whitelist that in one place

    Example in functions.php or a small code snippets plugin:

    function my_google_map_shortcode( $atts ) {
  $atts = shortcode_atts( array(
    'src' => ',
  ), $atts );

  if ( empty( $atts['src'] ) ) {
    return ';
  }

  $src = esc_url( $atts['src'] );

  return '<div class='map-ratio'><iframe src='' . $src . '' style='border:0;' loading='lazy' referrerpolicy='no-referrer-when-downgrade' allowfullscreen></iframe></div>';
}
add_shortcode( 'my_map', 'my_google_map_shortcode' );

    Then in the editor you just drop:

    [my_map src='https://www.google.com/maps/embed?pb=...']

    This avoids the editor touching your iframe HTML directly.

  4. When a plugin actually is easier
    I slightly disagree with the idea that manual iframe is always the best for a few maps. If:

    • You want to re-use the same map on multiple pages
    • The client will be editing content and you don’t trust them not to nuke the iframe
      then a lightweight map plugin that gives you a shortcode can actually save you from future “it dissapeared again” tickets.

    Some of them let you:

    • Define a map once in the dashboard
    • Use [map id='123'] everywhere
      So even one or two maps can be worth a plugin if non‑technical people will be touching content.

  5. Sanity check for you specifically
    Since you said it “doesn’t show up correctly or breaks the page layout,” I’d check this order:

    1. Paste the raw iframe into a brand new blank page with a Custom HTML block, no columns, no builders.
    2. View it on the front end.
      • If it still breaks, it’s theme CSS or a plugin filter.
      • If it looks fine there but breaks on your “real” page, the layout (columns, builder sections, etc.) is the culprit.

    That narrows it down in 2 minutes instead of randomly trying plugins.

If you post the exact iframe and what theme/page builder you’re on, people here can usually point at the exact CSS rule that’s wrecking it. Right now I’d bet on either a global iframe style or some column/flex parent choking the height.