Advertisement
Advertisement


Disable mouse scroll wheel zoom on embedded Google Maps


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?

2017/06/07
1
198
6/7/2017 6:51:28 AM


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>
2016/11/13

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.

2014/09/18

I'm re-editing the code written by #nathanielperales it really worked for me. Simple and easy to catch but its work only once. So I added mouseleave() on JavaScript. Idea adapted from #Bogdan And now its perfect. Try this. Credits goes to #nathanielperales and #Bogdan. I just combined both idea's. Thank you guys. I hope this will help others also...

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"); 
});

Improvise - Adapt - Overcome

And here is an jsFiddle example.

2015/04/27

Yes its quite easy. I faced a similar problem. Just add the css property "pointer-events" to the iframe div and set it to 'none'.

Example:< iframe style="pointer-events:none" src= ........ >

SideNote: This fix would disable all other mouse events on the map. It worked for me since we didnt require any user interaction on the map.

2014/05/21

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
2014/06/05