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

    The CSS

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

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
wordpress

Why the_date() Function in WordPress Only Shows Up Once on the First Post

I was building a blog on WordPress and I realised the function the_date() was only showing up on the first…

Read More
how to remove the send email button off the macbook 2016 touch bar on apple mail

How to Remove the Send Email Button Off the Macbook 2016 Touch Bar on Apple Mail

I bought the new Macbook Pro 2016 and it’s been working great so far, except one problem. Every time I’m…

Read More
Let's Work Together!

I’m currently available for freelance web design work in Belfast now.