Disable the mouse scroll wheel zoom on embedded Google Map iframes

Do Google Maps iframes get in the way of you scrolling through your website? Currently, if you’re using Google Maps API you can turn the scroll off, but for most people using embedded iframes, you will have to do a quick fix yourself to stop it. This tutorial will show you to how to disable the scroll on Google Maps iframes so you won’t have to move your cursor to the side of the screen to continue moving down the web page.

How to Remove the Scrolling on Google Maps iframe with an Overlay

The best way I’ve found get around this is by putting a DIV with an overlay over each Google Map iframe. This means that when your mouse moves over the Google Map, the overlay will be covering it and it won’t zoom in and out of the map. To use the map with the overlay DIV all you do is click on it once and you can zoom in and out etc.

The HTML

1. 1. First add in the overlay DIV in the HTML
      <div class="overlay" onClick="style.pointerEvents='none'"></div>
   2. Then add your Google Maps iframe code below it for example
      <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>

The CSS

1. Add in the CSS for the overlay DIV
   .overlay {
background:transparent;
position:relative;
width:640px; /* your iframe width */
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}

**Make sure the overlay CSS matches up to the Google Maps iframe width and height.**

Making it Work Responsively on Embedded Google Maps

If you want your Google Map to be responsive then simply add ‘100% width’ into the iframe code instead of 640px. For the overlay to work on a responsive Google Map you will have to make it responsive too. You can do this by changing the width in the CSS to the same as the iframe to 100% width.

Here’s an example below of how it works, try scrolling over it!