Disable mouse scroll wheel zoom on embedded Google

Question

I am working on a WordPress site where the authors usually embed Google Maps using iFrames in most posts.

Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript?

Answer 1

Using answer from @nathanielperales i've added hover function cause for me it works better when user loses focus on map to stop scrolling again :)

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}

Answer 2

I extended @nathanielperales solution.

Below the behavior description:

• click the map to enable scroll
• when mouse leaves the map, disable scroll

Below the javascript code:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

And here is an jsFiddle example.

Answer 3

This is a solution with CSS and Javascript (ie. Jquery but works also with pure Javascript). At the same time the map is responsive. Avoid map to zoom when scrolling, but map can be activated by click in it.

HTML/JQuery Javascript

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
} 

Have fun !

Answer 4

if you have an iframe using Google map embedded API like this :

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

you can add this css style: pointer-event:none; ES.

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

Answer 5

I tried the first answer in this discussion and it wasn't working for me no matter what I did so I came up with my own solution:

Wrap the iframe with a class (.maps in this example) and ideally embedresponsively code: http://embedresponsively.com/ — Change the CSS of the iframe to pointer-events: none and then using jQuery's click function to the parent element you can change the iframes css to pointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

I'm sure there's a JavaScript only way of doing this, if someone wants to add to this feel free.

The JavaScript way to reactivate the pointer-events is pretty simple. Just give an Id to the iFrame (i.e. "iframe"), then apply an onclick event to the cointainer div:

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Answer 6

This is my approach. I find it easy to implement on various websites and use it all the time

CSS and JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

In the HTML, you will want to wrap the iframe in a div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}

.scrolloff iframe   {
        pointer-events: none ;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

Hope this helps anyone looking for a simple solution.