CODEWITHSUNDEEP
google-mapsiframe
Milad
Milad

Reputation: 1269

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?

Upvotes: 17

Views: 72788

Answers (4)

Pradeep
Pradeep

Reputation: 317

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

Upvotes: 0

AlbertSamuel
AlbertSamuel

Reputation: 604

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>

Upvotes: 3

Jonny Jordan
Jonny Jordan

Reputation: 407

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

Upvotes: 1

kaho
kaho

Reputation: 4784

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.

Upvotes: 42

Related Questions