Need help embedding a Google Map in my WordPress site

General
1

I’m trying to embed a Google Map into a specific page on my WordPress site, but the map either doesn’t display correctly or breaks the layout. I’ve tried using the Google Maps embed code and a couple of plugins, but I’m not sure about the best method or where exactly to paste the code. Could someone explain the proper way to embed a responsive Google Map in WordPress and any settings I should double-check?

2

This usually comes down to three things: how you embed it, your editor mode, and CSS from your theme or plugins.

Try this step by step:

  1. Get a clean embed code
    • Go to Google Maps
    • Search your location
    • Click Share
    • Click Embed a map
    • Pick size
    • Copy the iframe code

  2. Use the right editor mode
    Classic Editor:
    • Switch to the Text tab, not Visual
    • Paste the iframe where you want the map

    Block (Gutenberg) Editor:
    • Add a Custom HTML block
    • Paste the iframe code there
    • Preview the block, make sure no errors

    Page builders (Elementor, WPBakery, Divi, etc):
    • Use their HTML or Code widget
    • Paste iframe inside that widget
    • Do not paste inside a Rich Text widget, some strip iframes

  3. Stop WordPress from stripping iframes
    If the code disappears after saving, a security plugin or page builder might be cleaning it.
    • Temporarily deactivate security plugins, test again
    • If you use a page builder, check if it has “allow iframe” or similar

  4. Fix layout breaking
    Many themes set iframes to 100% width or weird heights.
    Wrap the iframe in a div with fixed or responsive rules. Example:

    This keeps it centered and stops it from overflowing.

  5. Fix conflicts with flex or grid layouts
    If your section uses flex or grid, some themes force iframes to stretch or shrink.
    Quick CSS in Appearance → Customize → Additional CSS:

    .entry-content iframe,
    .wp-block-embed__wrapper iframe {
    max-width: 100%;
    display: block;
    }

  6. Check map not showing at all
    • If you see a gray box or “for development purposes only”, that is an API key or billing issue
    • If you used a plugin for maps with custom styling, those need a Google Maps API key and billing turned on
    • For a simple embed using Google’s iframe code, you do not need an API key, so stick to the iframe if plugins give you trouble

  7. If you want one page only
    • Make a separate page template if your theme supports it, but for most people, you only need to put the Custom HTML block on that single page
    • Do not put the map in a global footer or header widget

Quick test checklist:
• Use iframe from Share → Embed, not from your browser URL bar
• Paste in Custom HTML block
• Tenporary disable cache plugin, test in a private browser window
• Check if the map iframe exists in page source (right click → View Source, search for “iframe”)

If you share which editor you use and a sample URL, you get more precise steps, but the Custom HTML block with that div wrapper fixes this most of the time.

3

If the iframe and CSS stuff @techchizkid mentioned still leave your map acting weird, I’d look at these angles:

  1. Check if something is wrapping the map
    Sometimes the map is fine, but a parent container is the real problem.

    • In the browser dev tools, inspect the iframe and look at its parents.
    • If you see things like overflow: hidden, fixed heights (like height: 200px), or position: absolute, that can cut off or crush the map.
    • Temporarily disable that section’s “equal height columns” or special layout options in your page builder.

  2. Stop page builders from “helping” too much
    Plugins like Elementor / Divi / WPBakery sometimes try to make every element “responsive” in their own way.
    Instead of their generic “Embed” or “Text” blocks, try:

    • Elementor: use the “HTML” widget, and in Advanced → Layout, set Width to “Inline (auto)” or “Default”, not full stretch.
    • Divi: Code module only, and turn off any built-in animation or scroll effects for that column. Those can glitch iframes.

  3. If the layout breaks below the map
    Classic sign of an unclosed tag or broken HTML. The embed code is usually safe, but sometimes people paste it inside other HTML and forget a closing </div> or similar.

    • Switch to Code/HTML view and look near where you pasted the map.
    • Validate that all tags are closed before and after the iframe.
      One single missing </p> can push your layout off the rails.

  4. Check theme-specific “content width” rules
    A lot of modern themes set .entry-content > * to a fixed width and center it, but then let “wide” blocks stretch differently. The iframe can sometimes trigger “full width” unintentionally.
    Try adding a class around your map and control it by CSS instead of inline styles, for example:

    <div class='custom-map-wrapper'>
  <iframe src='YOUR_MAP_URL' loading='lazy' style='border:0;' allowfullscreen></iframe>
</div>

    And then in Additional CSS:

    .custom-map-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.custom-map-wrapper iframe {
  width: 100%;
  height: 400px;
  display: block;
}

  5. Hard refresh & cache
    More boring but surprisingly common:

    • Clear any caching plugin (WP Rocket, W3TC, LiteSpeed, etc).
    • Clear any CDN caching (Cloudflare “Purge Everything”).
    • Hard refresh browser (Ctrl + F5 or Cmd + Shift + R).
      I’ve seen people spend an hour tweaking “broken” layout when they were just seeing an old cached version.

  6. If the map shows tiny or squished on mobile
    Try a mobile-only CSS tweak, e.g.:

    @media (max-width: 600px) {
  .custom-map-wrapper iframe {
    height: 300px;
  }
}

    Themes sometimes lower column height or add padding that makes the map look half cut off on phones.

  7. When all else fails, isolate it
    Make a completely new test page with:

    • A single Custom HTML block (or straight HTML in Classic)
    • Only the raw Google Maps iframe
      If it works perfectly there, the problem is your original page’s layout, extra sections, or builder settings, not the map itself. Then you can slowly add pieces back until it breaks again and catch the exact conflict.

If you can share what theme and which page builder you’re using, plus if this is a full width template or boxed, it’s easier to pinpoint. Right now it really sounds like a combination of builder layout + theme CSS messing with the iframe more than the actual Google embed itself.

4

Two angles that often get missed here, even after you’ve done everything @shizuka and @techchizkid suggested:

1. Check if you’re mixing “Embed” and “API” approaches

If you’ve ever used a Google Maps plugin before, it might have left behind:

  • A custom script calling the JavaScript Maps API
  • A conflicting <iframe> from the basic Share → Embed method

Result: layout weirdness, double scrollbars, or a map that appears then vanishes.

What to do:

  1. Edit the page in HTML view and search for:
    • maps.googleapis.com/maps/api/js
    • more than one iframe pointing to Google Maps
  2. Leave only a single method for that page:
    • Either the pure Google Maps iframe
    • Or the plugin-generated shortcode / block, but not both

I slightly disagree with relying too heavily on plugins if the simple iframe meets your needs. The native embed is lighter, more stable, and avoids API / billing drama.

2. Diagnose using a barebones test template

Instead of just a blank test page, use the simplest template your theme has.

Steps:

  1. In the Page editor, under Page Attributes or Template:
    • Pick something like “Default,” “Full Width,” or “Canvas / Blank” and test each.
  2. On that test page:
    • Add only one Custom HTML block with the raw iframe.
  3. If it looks perfect on the blank/full-width template but broken on your usual template:
    • The issue is the template wrapper: content width, sidebars, or special layout CSS.

If that’s the case, sometimes switching the real page to a different template fixes everything faster than CSS band-aids.

3. Theme-level sanitization & allowed HTML

Apart from security plugins, some themes or membership plugins sanitize post content and strip iframes.

Check:

  • If you are restricting content types (like “only certain HTML allowed” in theme options)
  • If you are using a custom role that is not allowed to unfiltered_html

Quick test:

  • Try the same iframe while logged in as an Administrator.
  • If it only works for admins, your role / capability setup is stripping the iframe when saved.

4. Responsive aspect ratio control

Even with the wrapper trick, you might still see tall or squashed maps when the parent container is fluid.

Try an aspect-ratio wrapper instead of a fixed height:

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

Additional CSS:

.gmaps-ratio-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 56.25%; /* 16:9 ratio */
}

.gmaps-ratio-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

This avoids layout “jumps” and overly tall iframes, especially inside grid or flex containers.

5. Plugin vs pure iframe strategy

You mentioned trying a couple of plugins. The rough choice is:

Option A: Pure Google Maps iframe

Pros:

  • No API key or billing needed for basic map
  • Very low chance of conflicts once it is allowed through
  • Easy to move, copy, or reuse in any page / builder

Cons:

  • Very limited styling and no custom markers from WP UI
  • Harder to manage many locations at once

Option B: Map plugin approach (shortcodes / blocks)

Not naming a specific product title here since you have not settled on one yet, but in general:

Pros:

  • Visual controls, custom pins, clusters, styling options
  • Often responsive out of the box
  • Can handle multiple maps and locations more cleanly

Cons:

  • Many require a Google Maps API key and active billing
  • Extra scripts and CSS can bloat pages
  • More things to conflict with theme and builder

Given everything @shizuka and @techchizkid already covered, I’d:

  1. Strip the page of all map-related plugins / shortcodes.
  2. Test a single raw iframe on a blank or full-width template with the ratio wrapper.
  3. Once that is stable, then decide if a plugin is still worth adding on top.

If you can share which theme and whether you’re on Classic, Gutenberg, or a specific page builder (Elementor, Divi, etc.), it is usually possible to nail the exact CSS or template that is wrecking the layout in one or two targeted tweaks.