Tania Rascia

Skip Navigation
Prevent Mouse Scroll from Zooming on Embedded Google Maps

Prevent Mouse Scroll from Zooming on Embedded Google Maps

 /  6 responses

If you embed a Google Map into a website, they’ll give you some HTML that looks like this:

<iframe 
  src="https://www.google.com/maps/embed?xxx"
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen>
</iframe>

And the embedded result will look like this.

You’ll notice that when you scroll over the map, it will automatically start zooming in or out. This can be really annoying when all you want to do is scroll down the page, especially if the map takes up a lot of vertical space on the screen.

We can prevent this by creating an overlay div with pointerEvents='none'.

<div class="overlay" onclick="style.pointerEvents='none'"></div>
<iframe 
  src="https://www.google.com/maps/embed?xxx"
  width="100%"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen>
</iframe>

And an .overlay class that will cover the element.

.overlay {
	position: relative;
	width: 100%;
	height: 450px;
	top: 450px;
	margin-top: -450px;
	z-index: 1;
}

Now the map will only use the mouse to zoom after the user has clicked on the map. See example below.

Note

Hi, my name is Tania Rascia. I've turned down every offer for advertisements or sponsored posts on this website. I write free resources that have helped thousands of people successfully transition into a web development career.

My committment is to no bullshit, no sponsored posts, no ads, and no paywalls. If you enjoy my content, please consider supporting what I do.

Support my work

Newsletter

New articles on web development every two weeks.

Write a response

Your email address will not be published.

All code will be displayed literally.

Discussion

  • Nicholas says:

    This is cool info THANKS!
    THANKS!

  • James says:

    The example you use of a bad map that does capture the scroll events actually has the behavior that I’m looking for. When I scrolled over the top of it, there was an overlay that appeared on top of the map that said “Use cmd + scroll to scroll the map.” How did that happen? Your iframe code looks exactly like mine?

  • Zuzana says:

    Is there a way to make it go back to default, e.g. once I am finished zooming in/out, I click on the outside of the map and the map will go back to being fixed unless clicked on?

  • Andreas says:

    Hey there!

    I really like the simplicity of this idea. It’s working great. The only issue i noticed is that if the user interacts with the map once it doesn’t work anymore.

    Maybe this is fixable, maybe this shouldn’t happen at all.. o:

    however. great little trick. keep up that good work.
    best regards ~

    • Tania says:

      Hi Andreas,

      That is exactly what it’s supposed to do – it prevents the user from accidentally zooming instead of scrolling, but if they wish to interact with the map, they simply need to click on it once.