Menu
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?
725
you can use zoom variable for zoom level like bellow. Visit Google maps google.com/maps to create map (Step by step: 1) Find location 2) Click the cog symbol in the top left corner and select "Share or embed map" 3) On modal window select "Embed map" 4) Copy iframe code and paste it).
Once you have your Google Map created, ensure that the map you'd like to embed appears in the current map display. Click "Share" at the right of the page. In the box that pops up, click "Embed" Copy the entire HTML "<iframe> code string and paste it into the HTML code of your web page.
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.
79
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
