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?!

Comments

  1. hi there, would you mind to elaborate a little further in the details of how to use this please.

    Im 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.

    ReplyDelete

Post a Comment