Tania Rascia

Skip Navigation
Prevent Mouse Scroll from Zooming on Embedded Google Maps

Prevent Mouse Scroll from Zooming on Embedded Google Maps

 /  7 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.

Newsletter

Get updated when I create new content.
Unsubscribe whenever. Never any spam.

Note

I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

Your email address will not be published. Required fields are marked *

All code will be displayed literally.

Discussion

  • Logray says:

    Thank you for this little piece of code!

  • 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.