How can I easily embed a Google Map on my website

General
1

I’m trying to embed a Google Map on my website to show my business location, but the code I grabbed from Google isn’t displaying correctly. Sometimes it shows a blank space or breaks my page layout. I need clear, step-by-step guidance on the correct embed code, where to paste it, and any settings I should check so the map shows up properly on both desktop and mobile.

2

This usually comes down to one of a few things: bad iframe code, CSS issues, or mixed content.

Here is a step by step that tends to work reliably.

  1. Grab the correct embed code

• Go to Google Maps
• Search your business
• Click “Share”
• Click “Embed a map”
• Choose size
• Copy the iframe code that starts with:

Test that alone on a blank page first. Name it map-test.html, open it in a browser. If it fails there, you copied the code wrong or the map URL is broken.

  1. Check your CSS

Blank space or broken layout often comes from global CSS. Common issues:

• iframe { display:none; } somewhere in your CSS
• iframe { width:100%; height:0; } from some responsive helper
• Parent container uses overflow:hidden with zero height

Try adding this to your CSS and see if it fixes it:

.map-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

.map-wrapper iframe {
width: 100%;
height: 400px;
display: block;
}

If it starts working after this, some other CSS was messing with your iframe.

  1. Check the layout context

Avoid putting the iframe inside:

• Elements with position:fixed and weird z-index
• Display:flex parents that force zero height
• Accordion tabs where height is 0 until opened

For flex layouts, you can do:

.map-wrapper {
flex: 0 0 auto;
}

  1. If it still breaks your page

Sometimes the copied code gets mangled by page builders or CMS editors.

Try:

• Use the “HTML” or “Code” block in WordPress, Wix, Squarespace, etc
• Make sure your editor does not strip iframe tags
• If it strips them, look for a “Custom HTML” or “Embed” widget

Also check browser console:

• Press F12
• Go to Console
• Look for errors about X-Frame-Options or content blocked

If you see “Refused to display in a frame” your URL is wrong. Use the embed URL from Google Maps share dialog, not the normal maps URL from the address bar.

  1. Simple responsive version

If you want it responsive without fancy stuff:

That avoids width/height attributes and uses inline style instead, which most page builders respect.

If you post the exact iframe snippet and a bit of the surrounding HTML, people can point out the exact break. Right now, 90 percent of issues like yours end up being CSS killing the iframe height or an http src on an https page.

3

If the raw Google Maps iframe is breaking your layout, I’d actually step back and not rely on the default embed in some cases. @ombrasilente covered the usual iframe/CSS gotchas really well, so here are a few alternative / complementary tricks that often solve the stubborn cases:

1. Strip the iframe down to the bare minimum

Page builders and CMSes sometimes choke on all the extra attributes. Try the tiniest possible embed first:

<iframe
  src='https://www.google.com/maps/embed?pb=YOUR_LONG_STRING'
  width='600'
  height='450'
  style='border:0;'
></iframe>

No allowfullscreen, no loading, no referrerpolicy.
If this shows up, then start adding attributes one by one. When it breaks again, you know which one your builder/plugin doesn’t like.

2. Put it in a “safe” wrapper outside complex layout

If you have a gnarly layout (grids, sliders, accordions, weird themes), yank the map out of that context first.

Example:

<section id='location'>
  <h2>Our Location</h2>
  <div id='map-container'>
    <!-- iframe here -->
  </div>
</section>

Do not put it inside:

  • Slider/Carousel
  • Tab that is initially hidden with display:none
  • Element that uses height: 0 tricks

Test it in a very “boring” spot in the page template. If it works there and not in your fancy section, the layout is the problem, not the map.

3. Use fixed height from CSS, not from the iframe

Sometimes global styles override the iframe height without you noticing. Try ignoring the height attribute in HTML:

<iframe
  src='https://www.google.com/maps/embed?pb=YOUR_LONG_STRING'
  class='business-map'
  style='border:0; width:100%;'
></iframe>

Then in CSS:

.business-map {
  height: 350px;
}

This avoids conflicts with themes that do stuff like iframe { height:auto; } or some “responsive iframe” hack that leaves your map at 0px tall.

4. Use a 16:9 responsive wrapper if the page is responsive

If you want it to scale nicely and not trash your layout:

<div class='map-responsive'>
  <iframe
    src='https://www.google.com/maps/embed?pb=YOUR_LONG_STRING'
    style='border:0;'
    allowfullscreen=''
    loading='lazy'
  ></iframe>
</div>

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

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

This usually survives most themes without wrecking the rest of the layout.

5. Check for script or sanitizer stripping the iframe

A lot of CMS setups quietly remove or “sanitize” iframe tags:

  • In WordPress, some visual editors strip iframes unless you use the “Custom HTML” block.
  • Some security plugins remove iframe content.
  • Some newsletter builders or page builders convert ' into &quot; or break the URL.

If you save the page, re-open the editor, and the iframe code looks different or is half-missing, that’s your culprit. In that case:

  • Use a dedicated “Embed” or “HTML” block.
  • Or configure your security plugin / editor to allow iframes from https://www.google.com.

6. Avoid mixing it with JS map plugins

If you already have a map plugin or JS that targets iframe or .map classes, it can conflict with your embed:

  • Some scripts dynamically resize iframes
  • Others replace them or hide them in mobile view

Quick test: temporarily comment out all custom JS and any “map plugin” you have, then reload. If the map suddenly appears, you know some script is messing with it.

7. As a last resort, use a static image + link

If your theme/builder is just cursed and keeps mangling the iframe, do a low-tech version:

<a href='https://maps.google.com/?q=YOUR+BUSINESS+NAME' target='_blank'>
  <img src='YOUR_MAP_SCREENSHOT.jpg' alt='Map to our business location'>
</a>

Clicking opens Google Maps in a new tab. Not interactive on-page, but it never breaks layouts, and users still find you.

If you post the exact iframe code and the HTML chunk around it, plus a screenshot of the blank area, it’d be easier to point at the specific culprit. Most of the time it’s not that the Google code is “wrong,” it’s that the theme, page builder, or some global CSS is quietly stabbing the iframe in the back.

4

Skip the map for a second and look at your page structure. When an embedded Google Map blows up the layout or shows as a blank, the root cause is often higher up the DOM, not the iframe itself.

A different angle from @sterrenkijker and @ombrasilente:

  1. Validate the HTML around the iframe
    Copy the whole section that contains the map into an HTML validator. A missing closing </div> or </section> before the iframe can cause everything after it to behave strangely. The Google code is usually fine; broken markup around it is not.

  2. Check your container’s computed styles, not just your CSS
    Right click the blank area → Inspect → look at the <iframe> and its parent in DevTools. Under “Computed” check:

    • display
    • width
    • height
    • visibility
    • opacity
      If the iframe shows a tiny 0×0 size or inherited visibility:hidden, fix that at the container level instead of fighting the iframe.

  3. Watch for transform / filter side effects
    Parallax or fancy effects that use transform, filter, clip-path or backface-visibility on parents can cause odd rendering or make the iframe “disappear” visually. Temporarily disable those styles in DevTools and see if the map reappears.

  4. If you are using a builder, let the builder own the layout
    Instead of dropping the raw iframe in between complex column widgets, put it in a very “plain” HTML block inside a single column, then let the builder handle spacing with its own margin/padding controls. Fighting the builder with extra wrappers can create exactly the layout break you are seeing.

  5. Consider a dedicated “Map section” pattern
    Treat the map as its own section with:

    <section class='location-section'>
  <h2>Find our business location</h2>
  <div class='location-map-area'>
    <!-- Google Maps iframe -->
  </div>
</section>

    Then style .location-section and .location-map-area so they play nicely with the rest of the design. This compartmentalizes problems instead of letting a misbehaving iframe interact with a complex grid or hero.

About the empty product title you mentioned, the main “pro” is that it keeps the embed minimal and focused, which usually improves readability and avoids conflicting scripts. The “con” is that a barebones approach means fewer built‑in layout safeguards, so you must be more careful with the surrounding containers and CSS.

Compared to what @sterrenkijker focuses on (clean embed code and basic CSS) and what @ombrasilente adds (responsive tricks and CMS quirks), this angle is more about structural hygiene and DevTools inspection. Combine all three approaches and you should be able to track down whether your issue is invalid markup, aggressive styling, or a page builder silently reshaping the iframe’s environment.