How to disable mouse scroll wheel zoom on embedded Google Maps?
To disable mouse scroll wheel zoom on embedded Google Maps, you just need to set the css property pointer-events of the iframe to none:
<style>
#mapcontainer iframe {
pointer-events:none;
}
</style>
<div id="mapcontainer">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d49558.05949043515!2d-94.820775!3d39.075070499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87c08e065e054485%3A0xf8652fbc74a54de0!2sEdwardsville%2C+KS%2C+USA!5e0!3m2!1sen!2s!4v1415172721068" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
Further more, you can use this jQuery snippet to toggle the pointer on/off:
<script>
jQuery('#mapcontainer').toggle(function () {
jQuery('#mapcontainer iframe').css("pointer-events", "auto");
}, function(){
jQuery('#mapcontainer iframe').css("pointer-events", "none");
});
</script>
Pretty neat huh?!
<style>
#mapcontainer iframe {
pointer-events:none;
}
</style>
<div id="mapcontainer">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d49558.05949043515!2d-94.820775!3d39.075070499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87c08e065e054485%3A0xf8652fbc74a54de0!2sEdwardsville%2C+KS%2C+USA!5e0!3m2!1sen!2s!4v1415172721068" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
Further more, you can use this jQuery snippet to toggle the pointer on/off:
<script>
jQuery('#mapcontainer').toggle(function () {
jQuery('#mapcontainer iframe').css("pointer-events", "auto");
}, function(){
jQuery('#mapcontainer iframe').css("pointer-events", "none");
});
</script>
Pretty neat huh?!
hi there, would you mind to elaborate a little further in the details of how to use this please.
ReplyDeleteIm using Wordpress:
So do I insert this: ;
#mapcontainer iframe {
pointer-events:none;
}
into my custom css?
And like this?
https://www.dropbox.com/s/dcnd9k4yy12bd4k/google%20map%20no%20scroll.png?dl=0
thanks.