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:
Here is a Gist I created to remind myself in the future about this quick fix:
And that is it – nice and simple.