To undo the mouse scroll (zoom) action on a google map Iframe

Asked

Viewed 2,528 times

4

How to undo the mouse scroll (zoom) action on google map in this Iframe?

Is it possible to do this directly in this code or do I have to use Java Script? If you have to use js, how do I get this Iframe to be loaded only after all other files?

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" width="100%" height="200" frameborder="0" zoom="17" style="border:0" allowfullscreen></iframe>

javascript google-maps iframe google-maps-api-3

  • Don’t use irrelevant or incorrect tags. The problem isn’t about HTML5, read the tour and help learn how the site works.

  • Thank you, William.

2 answers

4


You can try applying pointer-events:none;, thus:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" width="100%" height="200" frameborder="0" zoom="17" style="border:0; pointer-events:none;" allowfullscreen></iframe>

Preferably move everything to your CSS file:

.mapa {
    border:0;
    width: 100%;
    pointer-events:none;
    height: 200px;
}

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" class="mapa" zoom="17" allowfullscreen></iframe>

The response of @abfurlan this great, but after the click it will be working, maybe it is better the event mouseup so (with jQuery):

<!DOCTYPE html>
<html>
<head>
<style>
    .mapa {
        border:0;
        width: 100%;
        height: 200px;
    }
    .scrolloff {
        pointer-events: none;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        $('#map').addClass('scrolloff');                // set the mouse events to none when doc is ready

        $('#overlay').on("mouseup",function(){          // lock it when mouse up
            $('#map').addClass('scrolloff'); 
            //somehow the mouseup event doesn't get call...
        });
        $('#overlay').on("mousedown",function(){        // when mouse down, set the mouse events free
            $('#map').removeClass('scrolloff');
        });

        $("#map").mouseleave(function () {              // becuase the mouse up doesn't work... 
            $('#map').addClass('scrolloff');            // set the pointer events to none when mouse leaves the map area
                                                        // or you can do it on some other event
        });

    });
</script>
</head>
<body>
<div id="overlay" class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" width="100%" height="200" frameborder="0" zoom="17" class="mapa" allowfullscreen></iframe>
</div>

</body>
</html>

Source: http://kylelam.github.io/iframe.html

Without jQuery:

<!DOCTYPE html>
<html>
<head>
    <style>
        .mapa iframe {
            border:0;
            width: 100%;
            height: 200px;
        }
        .scrolloff {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="overlay" class="mapa">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" zoom="17" class="scrolloff" allowfullscreen></iframe>
    </div>

    <script>
        var overlay = document.querySelector(".mapa");
        var mapa    = document.querySelector(".mapa iframe");

        function addScrollEvent()
        {
            mapa.className = mapa.className.replace(/^scrolloff$|^scrolloff\s|\scrolloff$/g, "");
            console.log(mapa.className);
        }

        function removeScrollEvent()
        {
            mapa.className += "scrolloff";
        }

        overlay.addEventListener("mouseup",    removeScrollEvent, false);
        overlay.addEventListener("mousedown",  addScrollEvent, false);
        mapa.addEventListener("mouseleave", removeScrollEvent, false);
    </script>
</body>
</html>

  • Thank you very much, friend! You helped me a lot.

  • @Will edited the answer

2

It is possible to disable mouse events on the iframe, using the property Pointer-Events CSS, but it disables all events. If you want to enable again you can use jQuery or Javascript to enable by clicking on the map. Example:

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});
.maps iframe{
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15552.222504311141!2d-39.25844181879532!3d-12.968292390398707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x73e2a46e74a4fff%3A0x79a5d5513a2d5178!2sFilial!5e0!3m2!1spt-BR!2sbr!4v1460941200537" width="100%" height="200" frameborder="0" zoom="17" style="border:0" allowfullscreen></iframe>
</div>

Source

  • 1

    Thank you very much, friend! You helped me a lot.

Browser other questions tagged javascript google-maps iframe google-maps-api-3

You are not signed in. Login or sign up in order to post.