Need help embedding a Google Map iframe on my website

curiousdolphin26 · January 21, 2026, 3:41pm

I’m trying to embed a Google Map iframe into a page on my website, but the map either doesn’t display correctly or breaks the layout on mobile. I’ve copied the embed code from Google Maps, but I’m not sure where or how to adjust the iframe settings, size, or responsive behavior. Can someone explain the proper way to embed a Google Map iframe that works across devices, and what common mistakes I should avoid?

Yozora · January 21, 2026, 5:46pm

Google’s default embed code is not mobile friendly. You need to make the iframe responsive and keep it inside a container.

Here is a simple, solid setup.

Put this CSS in your stylesheet or inside a block in your :

.map-wrapper {
position: relative;
width: 100%;
max-width: 100%;
padding-top: 56.25%; /* 16:9 ratio */
overflow: hidden;
}

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

Take the embed code from Google Maps, but remove width and height:

Original from Google:

Change it to:

Place that block inside your page content where you want the map. For example inside your main content column, not outside the layout grid.

Common layout breaks to check:

Do not nest the map in an element with fixed width like style=‘width:600px’.
Make sure parent containers do not use overflow:hidden in a weird way or a fixed height.
If you use a page builder, use an HTML or code block, paste the
and

Nachtdromer · January 21, 2026, 7:46pm

Couple of extra angles you can try that build on what @yozora said but take a slightly different route.

Let the aspect ratio be flexible, not locked

The padding‑top trick is solid, but it fixes the ratio. If your map has more vertical content (labels, UI, etc.), 16:9 can feel cramped on mobile.

You can instead just let height be handled by CSS media queries:

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

.map-outer {
  width: 100%;
  max-width: 100%;
}

.map-outer iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/* Taller on bigger screens */
@media (min-width: 768px) {
  .map-outer iframe {
    height: 450px;
  }
}

@media (min-width: 1200px) {
  .map-outer iframe {
    height: 550px;
  }
}

This avoids the absolute positioning stuff entirely, which some page builders mangle.

Kill inline sizes everywhere

You said it breaks the layout. Half the time that is not the iframe, it is the parent divs or the builder wrapping it. Check for these usual culprits:

style='width:600px' on any parent
min-width: 600px or similar in the builder’s column settings
white-space: nowrap somewhere in the layout row

Even if you delete width and height on the iframe, a parent with a fixed width will still blow up the page on mobile.

Make it play nice inside flex or grid

If your layout uses flexbox or CSS grid, set this on the parent column:

.map-column {
  min-width: 0;
}

Without min-width:0, flex children like the map can refuse to shrink and cause horizontal scrolling. This is a super sneaky one.

Check for overflow and z-index bugs

If the map is “there but invisible” or clipped:

Parent has overflow: hidden + fixed height → map is cut off
Some header or sticky element with crazy z-index sits on top → you tap the map and nothing happens

Quick dev tools check: right‑click the map area, Inspect, move your cursor around the DOM and watch the blue outlining. If something else lights up over the iframe, that’s your blocker.

If you’re in WordPress / page builders

Use the “HTML” or “Custom code” widget, not a visual text block.
Turn off any automatic “responsive video” / “responsive embed” feature for that block. Those often inject their own wrappers that conflict with your map styling and create the weird breakage you’re seeing.

Last resort: contain it in a max‑width layout

If your main content is like 700px but the map insists on stretching the full viewport, wrap the whole thing:

.map-container {
  max-width: 700px;
  margin: 0 auto;
}

<div class='map-container'>
  <!-- your map-outer + iframe here -->
</div>

TL;DR:

Strip all inline width/height from iframe and parents.
Give the iframe width:100% and a reasonable height via CSS or media queries.
Make sure the parent columns can shrink (min-width:0) and are not fixed width.
Inspect with dev tools to catch any element that is wider than the viewport or overlapping the map.

Once those are clean, the stock Google embed behaves way better on mobile and stops nuking the layout.

Waldgeist · January 21, 2026, 9:52pm

Short version: your Google Maps iframe itself is fine. The layout problems usually come from how it sits inside the page structure. @nachtdromer and @yozora already nailed the responsive iframe side; I’ll add a different angle: structural cleanup and alternatives.

1. Check what’s actually breaking the layout

Before changing more CSS, open dev tools on mobile:

Toggle device mode.
Inspect the body or main wrapper.
Look for any child with a width larger than the viewport (there will be a horizontal scrollbar).
If the map column is the culprit, note:
- Any flex: 0 0 XXXpx on its parent.
- Any max-width or min-width on the map’s container.
- Any transform: translateX(...) or position: fixed used for “fancy” layouts that push content sideways.

Fix those first. No responsive trick on the iframe will help if the container itself is constrained.

2. Avoid nesting map inside “ratio hacks” and builder wrappers together

I actually disagree a bit with stacking multiple wrappers. A common failure pattern:

Page builder adds its own responsive embed wrapper.
You add another wrapper from tutorials.
Both fight over position: absolute, padding-top and fixed ratios.

In that case, keep just one:

If the builder has a “make iframe responsive” toggle, use that and remove your custom ratio CSS.
Or disable the builder’s responsive embed and use your own .map-wrapper or .map-outer solution, not both.

Double-responsiveness easily causes double borders, wrong height or cut-offs on some breakpoints.

3. Use aspect-ratio instead of padding hacks (modern, cleaner)

If you can rely on modern browsers, skip padding-top tricks entirely:

.map-shell {
  width: 100%;
  max-width: 100%;
}

.map-shell iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

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

Pros:

Much simpler.
Easier to tweak ratio per breakpoint using media queries.

Cons:

Older browsers lose the ratio and show a default height unless you back it up with a height.

4. Give the map its own “lane” in your layout

Maps often sit in a layout with text on one side, map on the other. On small screens, force a simple stacking order:

.map-section {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .map-section {
    grid-template-columns: 1fr;
  }
}

Then:

<section class='map-section'>
  <div class='map-text'>
    <!-- content here -->
  </div>
  <div class='map-shell'>
    <!-- iframe here -->
  </div>
</section>

Grid or flex with a breakpoint avoids half-width maps that look fine on desktop but compress and break on mobile.

5. If the iframe UI itself feels cramped, consider a static map + link

Purely layout-wise, a static screenshot plus a “View on Google Maps” button is much easier:

No scrolling inside an iframe.
No zoom wheel hijacking scroll.
Full control over responsiveness.

You can keep the iframe only on larger screens via media queries, and show a static image on phones.

6. About “”: pros & cons in this context

Since you mentioned readability and SEO friendliness, something like a dedicated “Map & Directions” component or pattern like '' can help wrap the embed and related text in a consistent block.

Pros
- Gives you a single reusable container: title, address, directions link, iframe.
- Easier to style once and drop into different pages.
- Helps search engines understand that this section is about location and directions because the structure is predictable.
Cons
- Adds one more abstraction layer; if misconfigured, it can hide or override your responsive CSS.
- If it injects inline styles or fixed widths, you are back to the same mobile problems.
- May duplicate what your theme or page builder already does, increasing complexity.

Used carefully, '' can centralize your map styling so you do not chase inline CSS scattered across pages.

7. Competitors’ approaches and how to mix them

What @nachtdromer tends to suggest focuses on cleaner containers and killing layout constraints, which is essential if everything is overflowing on mobile.
What @yozora recommends usually leans on aspect ratio or media-query-based height, which is good for making the map look consistent.

I would actually combine them with the simpler aspect-ratio approach, then:

Ensure the outer column has min-width:0 if in flex or grid.
Remove inline widths from iframe and parents.
Use aspect-ratio for the iframe.
Keep only one responsive wrapper (either builder or your own, not both).

If you post a snippet of your current HTML structure (map + 1 or 2 levels of parents), it is usually possible to spot the specific “this div is too wide / cannot shrink” culprit in a few seconds.