I am working 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 am working 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`ve created a very simple jQuery plugin to resolve the problem. Check it at https://diazemiliano.github.io/googlemaps-scrollprevent
I stumbled upon this issue myself and used some of a mashup of two very useful answers on this question: czerasz's answer and massa's answer.
They both have a lot of truth, but somewhere in my tests, I found out that one didn't work for mobile and had poor IE support (only works on IE11). This is the solution by nathanielperales, then extended by czerasz, which relies on pointer-events css and that doesn't work on mobile (there is no pointer in mobile) and it doesn't work on any version of IE that is not v11. Normally I wouldn't care less, but there are a ton of users out there and we want consistent functionality, so I went with the overlay solution, using a wrapper to make it easier to code.
So, my markup looks like this:
Then the styles are like this:
Lastly the script:
I also added my tested solution in a GitHub gist, if you like to get stuff from there...
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 gmapiframe
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 :)
Here is my solution for the problem, I was building a WP site, so there is a little php code here. But the key is
scrollwheel: false,
in the map object.Hope this will help. Cheers
Here is my simple solution.
Put your iframe in a div with a class called "maps" for example.
This will be the CSS for your iframe
And here is a little javascript that will set the pointer-events property of the iframe to "auto" when you hover the div element for at least 1 second (works best for me - set it to whatever you like) and clears the timeout/set it to "none" again when the mouse leaves the element.
Cheers.