4

Como anular a ação mouse scroll (zoom) sobre mapa do google neste Iframe?

É possível fazer isso diretamente neste código ou tenho que usar Java Script? Se tiver que usar js, como faço pra que este Iframe seja carregado apenas depois de todos os outros arquivos?

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

2
  • Não use tags irrelevantes ou incorretas. O problema não é sobre HTML5, leia o tour e help pra aprender como funciona o site.
    – Syzoth
    20/04/2016 às 13:26
  • Obrigado, Guilherme.
    – Will
    20/04/2016 às 13:37

2 Respostas 2

4

Você pode tentar aplicar pointer-events:none;, assim:

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

De preferencia mova tudo pro seu arquivo CSS:

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

A resposta do @abfurlan esta ótima, mas após o click ele ficará funcionando, talvez seja melhor o evento mouseup assim (com 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>

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

Sem 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>
2
  • Muito obrigado, amigo! Me ajudou muito.
    – Will
    20/04/2016 às 13:41
  • @Will editei a resposta
    – Syzoth
    20/04/2016 às 13:49
3

É possível desabilitar os eventos do mouse sobre o iframe, utilizando a propriedade pointer-events CSS, porém ele desabilita todos os eventos. Se desejar habilitar novamente você pode utilizar jQuery ou JavaScript para habilitar ao clicar sobre o mapa. Exemplo:

$('.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>

Fonte

1
  • 1
    Muito obrigado, amigo! Me ajudou muito.
    – Will
    20/04/2016 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .