Need help embedding a Google Map on my website

General
1

I’m trying to embed a Google Map on my website, but the map either doesn’t load correctly or only shows a blank area where it should appear. I’ve copied the embed code from Google Maps and pasted it into my HTML, but it still won’t display as expected. Can someone explain the correct steps or settings I might be missing so I can get the Google embedded map to show up properly on my site

2

Most of the time when the Google Maps embed shows blank, it is one of these:

  1. No size on the iframe or parent
    If the iframe or its parent has height 0, the map looks blank.

Check your CSS:

.map-container {
width: 100%;
height: 400px;
}

And your HTML:

If you put height: 0 or forget height, the map will not show.

  1. Mixed content (HTTP vs HTTPS)
    If your site runs on HTTPS and you use an HTTP map src, the browser blocks it.

Make sure the iframe src starts with:
https://www.google.com/maps/embed?…

Not http://.

  1. Wrong embed code
    Use the “Share” button in Google Maps, then “Embed a map”, then copy that iframe. Do not copy the normal URL from the address bar.

  2. JavaScript errors breaking layout
    Open dev tools (F12), go to Console. If you see red errors and the page stops loading scripts, layout can break and hide the map.

Fix any obvious JS errors first. Then reload.

  1. Map inside hidden tab or accordion
    If you show the map inside a tab that is hidden at load, Google Maps struggles to render. You get a gray area.

Workaround:
Call map resize when the tab becomes visible. With a plain iframe you do not control that much, so a simple trick is to only add the iframe when the tab opens.

Example with JS:

document.getElementById(‘showMapBtn’).addEventListener(‘click’, function() {
const container = document.getElementById(‘mapWrap’);
if (!container.innerHTML) {
container.innerHTML = ‘’;
}
});

  1. Wrong HTML placement
    Make sure you drop the iframe inside the body, not in the head tag. Easy mistake when copy pasting fast.

  2. CSP or iframe restrictions
    If you use a strict Content Security Policy, you need to allow Google Maps.

Example header:

Content-Security-Policy: frame-src https://www.google.com https://www.google.com/maps;

And do not wrap the iframe in strange sandbox attributes that block scripts.

Quick checklist for you:

  • Does the iframe have width and height in CSS or inline
  • Does the parent div have height
  • Is src using https
  • Is it inside a visible container when the page loads
  • No big JS errors in console
  • The code is the one from “Embed a map”, not address bar

If you post the exact iframe snippet and the CSS for its container, people can point to the line that breaks it.

3

One thing I don’t see mentioned in @sognonotturno’s reply is the page structure / environment the map is living in. Since you’re getting a blank area, I’d look at these angles:

  1. HTML validator check
    Run your page through the W3C validator. If you’ve got a missing </div> or some tag soup, the browser can silently reflow the DOM so the iframe ends up somewhere weird or partly hidden. I’ve seen one unclosed <section> make the map disappear even though the iframe code was “correct.”

  2. Positioning / overlapping elements
    Sometimes the map is actually there but covered. Check with DevTools:

    • Right click where the map should be → Inspect.
    • Look for any absolutely positioned element with a higher z-index sitting on top.
      Example culprit:
    .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
}

    If something like that spans the same area, the map will “look” blank.

  3. Flexbox & grid quirks
    If your map is in a flex or grid layout, and you rely only on height: 100% inside, the map can collapse to 0 height even though you technically “set” a height.
    Try setting a fixed or min-height on the flex/grid item that holds the iframe:

    .map-col {
  min-height: 300px;
}

    Sometimes height: 100% on the iframe does nothing if the parent does not have an explicit height, even if the parent is part of a flexbox.

  4. Frameworks & components (React, Vue, etc.)
    If you are pasting the iframe inside a SPA framework component:

    • Make sure you are not pasting raw HTML into a place where the framework escapes it as text.
    • In React, you must use dangerouslySetInnerHTML or put the iframe directly in JSX:
      <iframe
  src='https://www.google.com/maps/embed?pb=...'
  style={{ border: 0, width: '100%', height: '100%' }}
  loading='lazy'
  allowFullScreen
/>
    • Also, if the component unmounts/remounts quickly (like route transitions), the map can flash blank.

  5. Ad blockers / privacy extensions
    Some content blockers treat Google embes like tracking and hide them. Test:

    • In an incognito window with all extensions disabled.
    • Or different browser / device.
      If it only fails for some users, this is often the reason. Nothing you can “fix” in HTML, but you can show a fallback like a text address or a “View on Google Maps” link.

  6. Third party builders / CMS filters
    If you’re using WordPress, Wix, Squarespace, etc., check if:

    • The editor is stripping parts of the iframe tag (like src query params) when saving.
    • A security plugin is sanitizing iframes.
      Try switching to a “HTML” or “Code” block and verify after saving that the code is still exactly what you pasted.

  7. Cross domain headers & framing policies
    Less common with the official embed URL, but if you somehow modified the src or used a non-embed URL, the remote page can send X-Frame-Options: SAMEORIGIN or a CSP that blocks framing, which results in a blank area instead of an error message.
    Quick check: open the iframe src directly in a new tab. It should show the embedded map UI, not the normal Google Maps site.

If you can paste just:

  • The iframe snippet
  • The few lines of CSS around its container
    someone can probably spot the issue in 2 minutes. Right now it’s 100% one of: container sizing, overlapping element, framework escaping the iframe, or something in your editor stripping it out.