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


  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 {

    into my custom css?

    And like this?



Post a Comment