Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Disable mouse scroll wheel zoom on embedded Google Maps
.overlay {
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="" width="640" height="480"></iframe>
I work on a WordPress site where the authors usually embed Google Maps using iFrames in most posts.
Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript?
I was having the same problem: when scrolling the page then the pointer becomes over the map,
it starts to zoom in/out the map instead of continuing scrolling the page. :(
So I solved this putting a div with an .overlay exactly before each gmap iframe insertion, see:
In my CSS i created the class:
The div will cover the map, preventing pointer events from getting to it. But if you click on the div,
it becomes transparent to pointer events, activating the map again!
I hope get helped you :)
For more infromation:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.