Desativar o zoom da roda de rolagem do mouse no Google Maps incorporado

198

Estou trabalhando em um site WordPress, onde os autores geralmente incorporam o Google Maps usando iFrames na maioria das postagens.

Existe uma maneira de desativar o zoom através da roda de rolagem do mouse em todos eles usando Javascript?

google-maps scrollwheel holiveira
fonte

32

Defina a opção de mapa scrollwheelpara false.

Anto Jurković 24/02

ou desative-o diretamente através do JS: map.disableScrollWheelZoom ();

Th3Alchemist

4

Receio que você não possa. Devido a restrições de segurança, não há acesso de script ao mapa e, a AFAIK, não há parâmetro de URL disponível que permita a desativação.

22414 Dr.Molle

Tem exatamente o mesmo problema. Deseja desativar os eventos de rolagem do mouse incorporados ao mapa iframe. Ainda não o encontrei.

Grzegorz

7

Este é incorporado mapas, não tenho certeza por que as pessoas postar soluções para usar os mapas biblioteca JS

zanderwar

255

Eu estava tendo o mesmo problema: ao rolar a página, o ponteiro fica sobre o mapa, ele começa a ampliar / reduzir o mapa em vez de continuar a rolar a página. :(

Então eu resolvi isso colocando um divcom um .overlayexatamente antes de cada iframeinserção do gmap , veja:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

No meu CSS eu criei a classe:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

A div cobrirá o mapa, impedindo que os eventos do ponteiro cheguem a ele. Mas se você clicar na div, ela ficará transparente para apontar eventos, ativando o mapa novamente!

Espero ter ajudado você :)

Massa
fonte

9

Esta é uma otima soluçao. No meu caso, eu tive que especificar um z-indexpara que ele fosse sobreposto corretamente.

RCNeil

1

IMO a melhor solução para este problema ainda! Estamos enfrentando esse problema há muito tempo e isso contribui para uma correção reutilizável, limpa e bonita!

Diego Paladino

11

isso deve ser marcado como a resposta, embora provavelmente seja mais fácil definir a sobreposição como absolutamente posicionada em um contêiner pai e, em seguida, apenas largura 100% altura 100%, também não precisa de uma propriedade de plano de fundo.

Hcharge 8/08/14

3

Eu criei um plugin jQuery muito simples para automatizar isso. Verifique em github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

Existe uma maneira simples de estender essa solução para que os eventos da roda de rolagem sejam ignorados, mas os cliques à esquerda não sejam ignorados? Esta solução é bom, mas exige que os usuários a clicar duas vezes sobre o "Directions" hyperlink no topo do mapa (uma vez para penetrar no div e depois novamente para clicar no próprio hyperlink.)

jptsetme

136

Eu tentei a primeira resposta nesta discussão e ela não estava funcionando para mim, não importa o que eu fiz, então criei minha própria solução:

Envolva o iframe com uma classe (.maps neste exemplo) e, idealmente, incorpore o código responsivo: http://embedresponsively.com/ - Altere o CSS do iframe para pointer-events: nonee, em seguida, usando a função click do jQuery para o elemento pai, você pode alterar o iframes css parapointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Tenho certeza de que existe uma única maneira de fazer isso no JavaScript, se alguém quiser adicionar a isso, fique à vontade.

A maneira JavaScript de reativar os eventos-ponteiro é bastante simples. Apenas forneça um ID para o iFrame (ou seja, "iframe") e aplique um evento onclick à div cointainer:

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

nathanielperales
fonte

4

Obrigado pela solução "sem API". +1

Tortura severa

21

Você também pode adicionar isso para retornar ao seu estado original quando o mouse sair: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("pointer-events", " Nenhum"); });

Luis

5

Apenas uma observação: o uso pointer-events: noneimpedirá qualquer interação com o mapa (arraste, navegação, cliques, etc.).

11685 LuBre

@LuBre sim, isso é entendido, é por isso que existe a função de clique no jQuery para alterá-la para automático.

Nathanielperales

1

Ótima resposta! Você quer ter certeza de que você está permitindo o mapa certo e nem todos na página$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

Estendi a solução @nathanielperales.

Abaixo da descrição do comportamento:

clique no mapa para ativar a rolagem
quando o mouse sair do mapa, desative a rolagem

Abaixo do código javascript:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

E aqui está um exemplo do jsFiddle .

czerasz
fonte

1

Obrigado por este recorte. Usei-o com o seguinte aditamento no final:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

lhermann

Obrigado pelo código. Na verdade, resolveu um problema diferente que eu tinha. Incorporei alguns gráficos da planilha do Google e a rolagem com a roda do mouse parou de funcionar por toda a página por algum motivo. Seu código fez rolar novamente com a roda do mouse. Obrigado novamente.

Scott M. Stolz

31

Estou reeditando o código escrito por #nathanielperales que realmente funcionou para mim. Simples e fácil de capturar, mas funciona apenas uma vez. Então eu adicionei mouseleave () no JavaScript. Idéia adaptada de #Bogdan E agora é perfeita. Tente isso. Os créditos vão para #nathanielperales e #Bogdan. Acabei de combinar as duas ideias. Obrigado pessoal. Espero que isso ajude outros também ...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Improvisar - Adaptar - Superar

E aqui está um exemplo do jsFiddle.

cHaMs
fonte

1

Solução mais limpa. Agradável! Mas TODAS as soluções têm um problema: os usuários precisam clicar no mapa duas vezes. Como pode passar o clique imediatamente, e leva apenas um clique?

Loren

1

Talvez você possa evitar o clique alternando para pointer-events: autosomente depois que o mouse "pairar" sobre o mapa por um determinado período? ou seja, inicie o timer quando o mouse entrar no iframe e redefina-o quando o mouse sair. Se o timer atingir X milissegundos, mude para pointer-events: auto. E sempre que o mouse sair do iframe, você apenas voltará para pointer-events: none.

Stucampbell

Eu prefiro usar dblclick em vez de clicar, de qualquer maneira uma boa solução.

Moxet Khan

25

Sim, é bem fácil. Eu enfrentei um problema semelhante. Apenas adicione a propriedade css "pointer-events" à div iframe e defina-a como 'none' .

Exemplo: <iframe style = "eventos-ponteiro: nenhum" src = ........>

Nota: Essa correção desabilitaria todos os outros eventos do mouse no mapa. Funcionou para mim, pois não exigimos nenhuma interação do usuário no mapa.

Hassam Raja
fonte

20

Por que não usar uma imagem então? você está carregando muitos recursos extras apenas para desativar tudo.

deweydb

2

Sim, mas o que eu não posso clicar sobre os widgets

Jeffrey Nicholson Carré

1

Por favor note que este não irá funcionar no IE <11 - caniuse.com/#search=pointer-events

totallyNotLizards

@deweydb - isso não é ilegal?

Matt Saunders

O @MattSaunders não tem certeza se esse foi o caso no momento, mas é agora. Você pode carregar uma imagem estática do mapa diretamente da API do Google, talvez seja isso que deweydb estava sugerindo? Certamente seria uma maneira viável de contornar o problema.

azariah

19

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

borchvm
fonte

13

Depois de fazer algumas pesquisas, você tem 2 opções. Como os novos mapas da API com iframe embed parecem não suportar a desativação da roda do mouse.

O primeiro seria usar mapas antigos do Google ( https://support.google.com/maps/answer/3045828?hl=pt-BR ).

O segundo seria criar uma função javascript para simplificar a incorporação de um mapa para cada comentário e usar parâmetros (é um código de exemplo apenas para apontar a localização e não mostrar a solução exata)

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}

Grzegorz
fonte

8

Existe uma solução incrível e fácil.

Você precisa adicionar uma classe personalizada em seu css que defina os eventos do ponteiro para mapear a tela como nenhum:

.scrolloff{
   pointer-events: none;
}

Em seguida, com o jQuery, você pode adicionar e remover essa classe com base em diferentes eventos, por exemplo:

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

Eu criei um exemplo no jsfiddle , espero que ajude!

Bogdan
fonte

1

Isso também funciona com a API de incorporação do Google Maps - basta substituir o map_canvas pelo iframe de incorporação. Note-se que o evento clique é no exterior elemento, mas scrolloff está no interior elemento (ele está correto na resposta / jsFiddle, apenas no caso que você está transcrevendo em vez de copiar / colar)

Jxtps

8

Acabei de registrar uma conta no site developers.google.com e recebo um token para chamar uma API do Google Maps e apenas desativo assim (scrollwheel: false):

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }

RSiqueira
fonte

Muito melhor do que hacks jQuery!

Dániel Kis-Nagy

7

Esta é a minha abordagem. Acho fácil de implementar em vários sites e usá-lo o tempo todo

CSS e JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

No HTML, você desejará agrupar o iframe em uma div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}

.scrolloff iframe   {
        pointer-events: none ;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

Expandir snippet

Espero que isso ajude quem procura uma solução simples.

user1588572
fonte

5

Aqui está uma solução simples. Basta definir o pointer-events: noneCSS como <iframe>para desativar a rolagem do mouse.

<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

Se você desejar que a rolagem do mouse seja ativada quando o usuário clicar no mapa, use o seguinte código JS. Também desabilitará a rolagem do mouse novamente, quando o mouse sair do mapa.

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})

manish_s
fonte

!!! Observe também que os eventos de ponteiro da Imho desativados todos clicam em Eventos para este Iframe.

stephanfriedrich

Os eventos de clique são desativados apenas para o iframe. Mas se você estiver usando o código JS, assim que o mouse entrar no suporte div.gmap, os eventos de clique serão ativados novamente.

precisa saber é

Isso funcionou brilhantemente para mim! A maioria das soluções era incompatível com o WordPress: o onclick é limpo e, às vezes, a largura do iframe não é respeitada, mas isso funcionou como um encanto. Depois de guardar o código JS, tudo o que você precisa fazer é referenciar o id = "gmap-holder". Perfeito. Graças à Manish.

usonianhorizon

4

Para desativar o zoom da roda de rolagem do mouse no Google Maps incorporado, basta definir o ponteiro-eventos da propriedade css do iframe como nenhum:

<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

Isso é tudo. Muito legal né?

<div id="googlemap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

NadirShah Rahat
fonte

2

Ele também irá desativar o zoom clique duas vezes :)

w3debugger

Também desativa o zoom-in, zoom-out, orientações etc

zanderwar

4

Bem, para mim a melhor solução foi simplesmente usar assim:

HTML:

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS:

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

RESULTADO

Considerações:

O melhor seria adicionar uma sobreposição com uma transparência mais escura com um texto: " Clique para navegar " quando a roda do mouse estiver desativada. Mas quando for ativada (após você clicar nela), a transparência com o texto desaparecerá e o usuário poderá navegar o mapa conforme o esperado. Alguma pista de como fazer isso?

Qatan
fonte

3

Adicione estilo a pointer-events:none;este bom trabalho

<iframe style="pointer-events:none;" src=""></iframe>

Mohan
fonte

3

A maneira mais simples de fazer isso é usando um pseudo-elemento como :beforeou :after.
Este método não exigirá nenhum elemento html ou jquery adicional.
Se temos, por exemplo, essa estrutura html:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Então, tudo o que precisamos fazer é tornar o wrapper relativo ao pseudo-elemento que criaremos para impedir a rolagem

.map_wraper{
    position:relative;
}

Depois disso, criaremos o pseudoelemento que será posicionado sobre o mapa, impedindo a rolagem:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

E pronto, sem jquery, sem elementos extras em html! Aqui está um exemplo jsfiddle de trabalho: http://jsfiddle.net/e6j4Lbe1/

Andrei
fonte

Ideia inteligente. No entanto, como algumas das outras respostas, isso captura tudo, não apenas os eventos da roda do mouse.

Like2like

Estou feliz por ter ajudado você!

Andrei

3

Aqui está a minha solução simples.

Coloque seu iframe em uma div com uma classe chamada "mapas", por exemplo.

Este será o CSS para o seu iframe

.maps iframe { pointer-events: none }

E aqui está um pequeno javascript que definirá a propriedade pointer-events do iframe como "auto" quando você passar o mouse pelo elemento div por pelo menos 1 segundo (funciona melhor para mim - defina o que quiser) e limpe o tempo limite / defina-o como "none" novamente quando o mouse sair do elemento.

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

Felicidades.

iXzellent
fonte

3

Eu criei um plugin jQuery muito simples para resolver o problema. Confira em https://diazemiliano.github.io/googlemaps-scrollprevent

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);

Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

Expandir snippet

Emiliano Díaz
fonte

2

Usando resposta de @nathanielperales, eu adicionei a função de foco, porque para mim funciona melhor quando o usuário perde o foco no mapa para parar de rolar novamente :)

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}

Maciek Kwapinski
fonte

O problema é que perdemos a função de navegação, para mim é muito importante em dispositivos móveis. Eu criei um plugin jQuery muito simples que você pode modificar, se quiser. Verifique em github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

Variações sobre um tema: uma solução simples com jQuery, sem necessidade de edição CSS.

// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
    $(iframe).parent().hover( // make inactive on hover
        function() { $(iframe).css('pointer-events', 'none');
    }).click( // activate on click
        function() { $(iframe).css('pointer-events', 'auto');
    }).trigger('mouseover'); // make it inactive by default as well
});

O ouvinte em foco é anexado ao elemento pai, portanto, se o pai atual for maior, você pode simplesmente envolver o iframe com uma div antes da terceira linha.

Espero que seja útil para alguém.

bencergazda
fonte

1

Eu me deparei com esse problema e usei algumas mashup de duas respostas muito úteis sobre essa questão: resposta de czerasz e massa .

Ambos têm muita verdade, mas em algum lugar nos meus testes, descobri que um não funcionava para dispositivos móveis e tinha um suporte ruim para o IE (funciona apenas no IE11). Esta é a solução de nathanielperales, depois estendida por czerasz, que depende de css de eventos de ponteiros e que não funciona em dispositivos móveis (não há ponteiros em dispositivos móveis) e não funciona em nenhuma versão do IE que não seja v11 . Normalmente, eu não me importaria menos, mas há muitos usuários por aí e queremos uma funcionalidade consistente, então fui com a solução de sobreposição, usando um wrapper para facilitar a codificação.

Então, minha marcação fica assim:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

Então os estilos são assim:

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Por fim, o script:

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

Também adicionei minha solução testada em uma essência do GitHub , se você quiser obter coisas de lá ...

EffectiX
fonte

1

Esta é uma solução com CSS e Javascript (ou seja, Jquery, mas também funciona com Javascript puro). Ao mesmo tempo, o mapa é responsivo. Evite ampliar o mapa ao rolar, mas o mapa pode ser ativado clicando nele.

Javascript HTML / JQuery

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
}

Diverta-se !

Jean
fonte

1

No Google Maps v3, agora você pode desativar a rolagem para aumentar o zoom, o que leva a uma experiência do usuário muito melhor. Outras funções do mapa ainda funcionarão e você não precisa de divs extras. Também achei que deveria haver algum feedback para o usuário, para que ele possa ver quando a rolagem está ativada, então adicionei uma borda do mapa.

// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map'); 

// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
  var mapElement = $(mapSelector);

  // Disable the scroll wheel by default
  map.setOptions({ scrollwheel: false })

  // Enable scroll to zoom when there is a mouse down on the map.
  // This allows for a click and drag to also enable the map
  mapElement.on('mousedown', function () {
    map.setOptions({ scrollwheel: true });
    mapElement.css('border', '1px solid blue')
  });

  // Disable scroll to zoom when the mouse leaves the map.
  mapElement.mouseleave(function () {
    map.setOptions({ scrollwheel: false })
    mapElement.css('border', 'none')
  });
};

Gerry
fonte

1

Isso fornecerá um mapa do Google responsivo que interromperá a rolagem no iframe, mas uma vez clicado, você poderá ampliar.

Copie e cole isso no seu html, mas substitua o link iframe pelo seu. Ele é um artigo sobre isso com um exemplo: desative o zoom da roda de rolagem do mouse nos iframes incorporados do Google Map

<style>
    .overlay {
    background:transparent;
    position:relative;
    width:100%; /* your iframe width */
    height:480px; /* your iframe height */
    top:480px; /* your iframe height */
    margin-top:-480px; /* your iframe height */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>

Jonny Jordan
fonte

0

Aqui seria a minha abordagem para isso.

Coloque isso no meu arquivo main.js ou semelhante:

// Create an array of styles.
var styles = [
                {
                    stylers: [
                        { saturation: -300 }

                    ]
                },{
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        { hue: "#16a085" },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                }
              ],

                // Lagitute and longitude for your location goes here
               lat = -7.79722,
               lng = 110.36880,

              // Create a new StyledMapType object, passing it the array of styles,
              // as well as the name to be displayed on the map type control.
              customMap = new google.maps.StyledMapType(styles,
                  {name: 'Styled Map'}),

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
              mapOptions = {
                  zoom: 12,
                scrollwheel: false,
                  center: new google.maps.LatLng( lat, lng ),
                  mapTypeControlOptions: {
                      mapTypeIds: [google.maps.MapTypeId.ROADMAP],

                  }
              },
              map = new google.maps.Map(document.getElementById('map'), mapOptions),
              myLatlng = new google.maps.LatLng( lat, lng ),

              marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: "images/marker.png"
              });

              //Associate the styled map with the MapTypeId and set it to display.
              map.mapTypes.set('map_style', customMap);
              map.setMapTypeId('map_style');

Em seguida, basta inserir uma div vazia onde deseja que o mapa apareça na sua página.

<div id="map"></div>

Obviamente, você também precisará acessar a API do Google Maps. Eu simplesmente criei um arquivo chamado mapi.js e o joguei na minha pasta / js. Este arquivo precisa ser chamado antes do javascript acima.

`window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`

Quando você chama o arquivo mapi.js, certifique-se de passar o atributo false do sensor.

ou seja: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

A nova versão 3 da API requer a inclusão do sensor por algum motivo. Certifique-se de incluir o arquivo mapi.js antes do arquivo main.js.

Chad Warren
fonte

0

Para o google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

user956584
fonte

0

se você tiver um iframe usando a API incorporada do mapa do Google como esta:

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

você pode adicionar este estilo css: pointer-event: none; ES

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

Frank Dark
fonte

0

Aqui está minha opinião sobre a resposta @nathanielperales estendida por @chams, agora estendida novamente por mim.

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

jQuery

// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");

// as a safety, allow pointer events on click
$('.maps').click(function() {
  $(this).find('iframe').css("pointer-events", "auto");
});


$('.maps').mouseleave(function() {
  // set the default again on mouse out - disallow pointer events
  $(this).find('iframe').css("pointer-events", "none");
  // unset the comparison data so it doesn't effect things when you enter again
  $(this).removeData('oldmousepos');
});

$('.maps').bind('mousemove', function(e){
  $this = $(this);
  // check the current mouse X position
  $this.data('mousepos', e.pageX);
  // set the comparison data if it's null or undefined
  if ($this.data('oldmousepos') == null) {
    $this.data('oldmousepos', $this.data('mousepos'));
  }
  setTimeout(function(){
    // some left/right movement - allow pointer events
    if ($this.data('oldmousepos') != $this.data('mousepos')) {
      $this.find('iframe').css("pointer-events", "auto");
    }
    // set the compairison variable
    $this.data('oldmousepos', $this.data('mousepos'));
  }, 300);
  console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});

squarecandy
fonte

0

O mais simples :

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>

T.Todua
fonte

0

Adicione isso ao seu script:

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru,
        scrollwheel: false,
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
});
}

Akriti
fonte

2

A questão é em relação à API incorporada (usando um iframe), não à API JavaScript.

GreatBlakes

0

Aqui está minha solução para o problema: eu estava construindo um site WP, então há um pouco de código php aqui. Mas a chave está scrollwheel: false,no objeto do mapa.

function initMap() {
        var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }

Espero que isso ajude. Felicidades

Djordje Arsenovic
fonte

Desativar o zoom da roda de rolagem do mouse no Google Maps incorporado

Respostas: