Disabling zooming in Google Maps iframe
Here is a really quick solution on how to disable zooming, mouse scrolling and mouse movement in an iframe….
Example: Disabling zooming in Google Maps iframe
The best example I can think you would use this on (and the reason why I needed this solution myself) is because on a website I was developing, I integrated a Google Map in an iframe on the contact page. I found it really annoying that if you attempted to scroll down the page when your mouse was positioned over the Google Maps iframe, it would zoom into the map and not scroll vertically on the page. So I set out to figure out how to easily disable it.
Solution: Disable Pointer Events
The solution is actually really simple and elegant – just disable all pointer events in the iframe. This will prevent zooming, scrolling, moving the map, etc – which is actually perfect for the situation I found myself – I want users to be able to view the map but not interact with it.
So how do you disable pointer events in an iframe? Simple….
;
So in my situation, all I did was the following to disable zooming in Google Maps iframe:
Gist
Here is a Gist I created to remind myself in the future about this quick fix:
And that is it – nice and simple.
Enjoy!
It works great, Thank you very much!
Quick fix: You need to close the style attribute with a double-quote before specifying the src attribute.
Good pick up! Fixed. Thanks
Thks Guy!!
About a half of hour looking for a solution and finally found this 😀
Thanks for the info.
Awesome, glad I could help!
Thanks for the comment
Luca
It was seriously this easy?? I looked everywhere for a solution, people writing css, html, and js to fix it, and it was just a tiny thing right in the embed code.
Thank you sooo much!
Thanks Leanne! Glad to help.
Luca
Is there an option to disable only the zooming? Because I still need available to click in the map to see the directions or see the map in a full window.
Thanks
Hi Carlos, if you want to disable the scroll wheel on the mouse only then you could try this >>> http://stackoverflow.com/questions/2330197/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api
Thanks
Luca
Thanks for solution. 🙂
Hello,
I want to enable touch events and disable scrool down event. is this possible?
Hi Kinnari,
Give this a go >>> http://stackoverflow.com/questions/2330197/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api
Thanks
Luca
very nice, wonderful tip … thanks
Thanks for the tip. Wish it was as simple as an alternative pointer-event option to allow clicks and ignore scroll… I’ll have to try the api directions you linked.
Thanks! Worked perfect.
Thanks that worked well, here’s a different way to do it also. https://jonnyjordan.com/blog/disable-mouse-scroll-wheel-zoom-embedded-google-map-iframes/
Thanks Jonny Jordan.