Google Maps how to disable scrolling on iframes

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


Tags: , , ,


Please share if you found this useful

Recent posts

Magento Image Upload Button Missing

How To Fix Magento Image Upload Button Not Showing

Have your Magento upload buttons gone missing on the backend for all of your products? This seems to be a…

Read More
How to Disable Plugins from WordPress Without Dashboard Access

How to Disable Plugins from WordPress Without Dashboard Access

Sometimes we need to disable WordPress plugins without accessing the WordPress dashboard. Often times during troubleshooting, many websites recommend that…

Read More
Facebook thumbnails

How to Fix the Wrong Facebook Share Link Thumbnail Image with WordPress

When sharing links on Facebook have you ever noticed the wrong thumbnail image displaying? If a URL has been shared…

Read More
Let's Work Together!
I’m currently available for freelance web design work in Belfast now.