Disable scrolling zoom in google maps iframe

So, apparently when I use:

<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

the panning gets disabled as well.

and when I use:

<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

it just deosn't work.

Is there anyway to just disable the scroll zoom in the iframe?

Answers


There are no way to disable scroll only on the Google Maps iframe API, but there is a work around.

As you had noticed that style="pointer-events:none;" does prevent the iframe from receiving any mouse event, and with the combination of Javascript event handlers on the overlay, you can disable and enable the receiving of mouse event at the time you want.

You can even listen to the mousemove() and only release the pointer events when the mouse are on certain areas (say, buttons)

I made a quick demo on github, hope this help.


For someone that wondering how to disable the Javascript Google Map API

Adopted from @kaho idea

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>

He's a good blog post with how to achieve that with onClick="style.pointerEvents='none'" Disable the mouse scroll wheel zoom on embedded Google Map iframes


Here is example

<script>
  function initMap() 
 {   
  var map = new google.maps.Map(document.getElementById('map'),    
  {center: {lat: -34.397, lng: 150.644},     
  scrollwheel: false,    
  zoom: 8
  });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>      
</script>

Source:- https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods


Need Your Help

Xcode 4 project: utility to clean up pbxproj file?

xcode xcode4

I have an Xcode 4 project with 2 targets, one for iPhone and one for iPad. If I click on the iPad target and try to go to Build Settings Xcode 4 crashes:

Issue with utf-8 encoding using PHP + MySQL

php mysql encoding utf-8 multibyte

I moved data from MySQL 4 (they were originally set to latin2 encoding) to MySQL 5 and set encoding to utf-8. It looks good in phpMyAdmin, and utf-8 is okay. However there are question marks instea...