If you embed a Google map into your page via Google’s embed code, you can set a location marker and a zoom level (on the Google Maps side, before you click the “share” button), but other tweaks are reserved for users with API accounts. I was recently in a situation where we simply wanted to disable scroll-to-zoom, because it is super annoying – especially on mobile.

Somewhere online I found the idea to cover the map with a transparent div (you can see through it, but you can’t click through it or “scroll through” it) and add a line of JavaScript to remove that div if it is clicked on. It seemed hacky to me at first but the more I thought about it the more I liked it. We decided to use it and not even to worry about putting a “click to interact”-type note. If someone clicks once without effect they are going to click again, and then what they wanted to do will work.

If you are setting up your maps in a responsive iframe wrapper, the setup is very simple. Just tuck a second div in after the iframe (second so it will be on top), give it the same styling as the iframe, and add a line of JavaScript in the footer of your page.

Here’s the code for the embedded map above (view on pastebin):