Wednesday, November 5, 2014

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:

#mapcontainer iframe {
<div id="mapcontainer">
<iframe src="!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>

Further more, you can use this jQuery snippet to toggle the pointer on/off:

        jQuery('#mapcontainer').toggle(function () {
                jQuery('#mapcontainer iframe').css("pointer-events", "auto");
        }, function(){
                jQuery('#mapcontainer iframe').css("pointer-events", "none");

Pretty neat huh?!