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

Question

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

Navigation

#1 by (4 votes)
#2 by (2 votes)

4

How to undo the mouse scroll 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 load 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

asked by anonymous 20.04.2016 / 14:57

2 answers

2

You can disable mouse events on iframe by using the pointer property -events CSS, but it disables all events. If you want to enable it again you can use jQuery or JavaScript to enable 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><divclass="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>

Font

20.04.2016 / 15:28

Split by character | does not return all expected elements What is the benefit of using closures in PHP?

score 4 · Accepted Answer

You can try to apply pointer-events:none; , like this:

<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 from @abfurlan is great, but after the click it will work, maybe the event is better mouseup like this (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');//setthemouseeventstononewhendocisready$('#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: link

No 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>