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!

Comments

  1. 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!

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

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

Leave a Comment