How can I embed a Google Map in my HTML page correctly

General
3

The blank gray box usually means the iframe is technically there but your environment is choking on it for some reason. @kakeru covered the basic copy paste stuff well, so I’ll skip repeating that and hit the things that still break it even when the embed code is “correct.”

1. Check if something on your page is killing iframes

A lot of themes / templates have global CSS that silently ruins embeds. Look for stuff like:

iframe {
  display: none;
  visibility: hidden;
  max-height: 0;
}

or overly “helpful” rules such as:

* {
  box-sizing: border-box;
  overflow: hidden;
}

If any of that exists, comment it out and refresh. I’ve seen “clean” templates literally set all iframes to 0 height, then people wonder why the map is a sad gray rectangle.

Also check for:

.map-container {
  overflow: hidden;
}

combined with height: 0 or some flexbox weirdness. Flex + missing explicit height = invisible map.

2. Look for JavaScript conflicts

If your page uses scripts that hijack iframes, lazy load, or do “security” tricks, they can stop Google Maps from rendering:

  • Third party cookie banners that block Google domains until consent
  • “Ad blockers” injected by browser extensions
  • Some performance plugins that defer or rewrite iframes

Temporarily disable:

  • your browser extensions (AdBlock, uBlock, “Privacy Badger”, etc.)
  • your theme’s optimization / lazy load plugin (if this is on WordPress or similar)

Then hard refresh with dev tools open and see if the map suddenly appears.

3. Content Security Policy and X-Frame headers

This is the part people ignore until they burn a weekend on it.

If your server is setting strict headers, the browser may silently block the map:

  • Content-Security-Policy with no frame-src or child-src for https://www.google.com and https://maps.googleapis.com
  • X-Frame-Options: DENY or SAMEORIGIN from your own hosting

Check in the browser console for messages like:

  • “Refused to frame ‘https://www.google.com/…’ because it violates the following Content Security Policy directive…”
  • “Refused to display … in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’”

If you see that, you need to tweak headers on your server or via your hosting control panel (or .htaccess / nginx config) to allow Google’s map URLs to be framed.

4. Verify the embed URL is intact

It’s not rare for editors (esp. “visual” or WYSIWYG ones) to mess up the iframe:

  • They escape the & characters or strip attributes
  • They cut off part of the src query string

Compare the iframe’s src in your page to the one from Google Maps. It should be a long https://www.google.com/maps/embed?pb=... URL. If it looks shortened, is missing parameters, or got split across lines by your CMS editor, that can produce the blank map effect.

If your editor messes with it, switch to a “code” / “HTML” block and paste it there only.

5. Test it completely isolated

Create a super bare file like map-test.html with literally just:

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Map Test</title>
</head>
<body>
  <iframe
    src='YOUR_REAL_EMBED_URL_HERE'
    width='600'
    height='450'
    style='border:0;'
    allowfullscreen=''
    loading='lazy'
    referrerpolicy='no-referrer-when-downgrade'>
  </iframe>
</body>
</html>

Upload it to the same hosting, go directly to it in your browser.

  • If it works here but not on your real page, your theme / CSS / JS is to blame.
  • If it still fails here, then it’s headers, domain, or the embed URL itself.

This simple isolate test saves a ton of guesswork.

6. Tiny disagreement with @kakeru

I would not rely too heavily on helper tools at the start. Better to get a raw embed from Google Maps working in a plain HTML file so you understand the baseline behavior. Once that’s solid, then a generator can help with responsiveness and styling on top. Otherwise you’re debugging two variables at once.

That said, if you want something that handles sizing and layout nicely for business sites, try something like
customize and embed a professional Google Map layout
after you confirm the plain iframe works. It can simplify resizing and mobile behavior for a small business page.

If you post the exact iframe snippet you’re using and maybe the relevant CSS around it, people can probably eyeball what’s killing it in about 10 seconds.