Como desativar o dimensionamento da roda de rolagem do mouse com a API do Google Maps


560

Estou usando a API do Google Maps (v3) para desenhar alguns mapas em uma página. Uma coisa que eu gostaria de fazer é desativar o zoom quando você rola a roda do mouse sobre o mapa, mas não sei como.

Desativei o scaleControl (isto é, removi o elemento da interface do usuário de escala), mas isso não impede o dimensionamento da roda de rolagem.

Aqui está parte da minha função (é um simples plugin jQuery):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

1
Olá, criei um plugin mais desenvolvido que permite bloquear ou desbloquear o mapa com um bom botão. Também é o plugin jQuery. Você pode conferir em github.com/diazemiliano/googlemaps-scrollprevent Espero que você goste.
Emiliano Díaz

Respostas:


986

Na versão 3 da API do Google Maps, você pode simplesmente definir a scrollwheelopção como false nas propriedades do MapOptions :

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Se você estivesse usando a versão 2 da API do Google Maps, teria que usar a chamada da API disableScrollWheelZoom () da seguinte maneira:

map.disableScrollWheelZoom();

O scrollwheelzoom é ativado por padrão na versão 3 da API do Google Maps, mas na versão 2 é desativado, a menos que seja explicitamente ativado com a enableScrollWheelZoom()chamada da API.


40
+1 FYI: disableDefaultUI: truepode substituirnavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno

1
Um problema para mim foi que, se você não tiver o mapTypeId, os outros parâmetros serão ignorados.
Michael Hunter

Isso funciona para mim, mas tem o estranho efeito colateral de desativar a roda de rolagem dentro de um modal na página. Não há mapa no conteúdo modal e o cursor não está sobre o mapa.
regularmike

Infelizmente, isso não funciona conforme o esperado com o StreetViewPanorama Map, ao colocar a roda de rolagem: false, desativa o zoom de rolagem, mas também desativa a rolagem da página, pois ainda está capturando a rolagem de alguma forma.
Solomon Closson

Daniel, Você pode me ajudar a responder a essa pergunta stackoverflow.com/questions/60544486/…
Xavier Issac

103

O código de Daniel faz o trabalho (muito obrigado!). Mas eu queria desativar o zoom completamente. Eu descobri que precisava usar todas as quatro opções para fazer isso:

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

Consulte: Especificação do objeto MapOptions


2
Isso ainda funciona para você? Não consegui fazer com que a versão atual da v3 (acredito que seja a 3.9) ignore a roda de rolagem e tive que recorrer a todos os filhos do objeto do mapa e interromper a propagação no mapa.
c.apolzon

Sim, funciona para mim, obrigado! Além disso, se você deseja remover todos os widgets de controle de mapa padrão, basta desativar o padrãoDefaultUI: true em vez de desativar o zoom, girar e girar os controles individualmente.
Thomax

33
Cuidado com letras maiúsculas; scrollwheelprecisa ser todas as letras minúsculas (apenas me pego por upcasing o W)
Kez

1
scrollwheel: false era tudo que eu precisava
mindore

30

Apenas no caso de você querer fazer isso dinamicamente;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

Às vezes, você precisa mostrar algo "complexo" sobre o mapa (ou o mapa é uma pequena parte do layout), e esse zoom de rolagem fica no meio, mas depois de ter um mapa limpo, esse modo de zoom é bom.


3
Você pode adicionar esse código na inicialização: map.addListener ('clique', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
Spaceman

Isso funciona para mim, pois eu queria interrogar a função de roda de rolagem do mapa fora do código do Google Maps. ou seja, de dentro do meu próprio código jquery.
Lharby

26

Mantenha simples! Variável original do Google Maps, nenhuma das coisas extras.

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

10

A partir de agora (outubro de 2017), o Google implementou uma propriedade específica para lidar com o zoom / rolagem, chamada gestureHandling. Seu objetivo é lidar com a operação de dispositivos móveis, mas também modifica o comportamento dos navegadores de desktop. Aqui está na documentação oficial :

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

Os valores disponíveis para gestoHandling são:

  • 'greedy': O mapa sempre desloca (para cima ou para baixo, esquerda ou direita) quando o usuário desliza (arrasta) a tela. Em outras palavras, um furto com um dedo e um furto com dois dedos fazem com que o mapa seja panorâmico.
  • 'cooperative': O usuário deve deslizar com um dedo para rolar a página e dois dedos para percorrer o mapa. Se o usuário deslizar o mapa com um dedo, uma sobreposição será exibida no mapa, com uma solicitação para o usuário usar dois dedos para mover o mapa. Em aplicativos de área de trabalho, os usuários podem ampliar ou deslocar o mapa rolando enquanto pressionam uma tecla modificadora (a tecla ctrl ou ⌘).
  • 'none': Esta opção desabilita o movimento panorâmico e beliscar no mapa para dispositivos móveis e arrastar o mapa em dispositivos de mesa.
  • 'auto'(padrão): dependendo da rolagem da página, a API JavaScript do Google Maps define a propriedade gestoHandling como uma 'cooperative'ou'greedy'

Em resumo, você pode facilmente forçar a configuração para "sempre com zoom" ( 'greedy'), "nunca com zoom" ( 'none') ou "o usuário deve pressionar CRTL / ⌘ para ativar o zoom" ( 'cooperative').


7

Eu criei um plugin jQuery mais desenvolvido que permite bloquear ou desbloquear o mapa com um bom botão.

Este plug-in desativa o iframe do Google Maps com uma div de sobreposição transparente e adiciona um botão para unlockit. Você deve pressionar 650 milissegundos para desbloqueá-lo.

Você pode alterar todas as opções para sua conveniência. Confira em https://github.com/diazemiliano/googlemaps-scrollprevent

Aqui está um exemplo.

(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);
.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>


bom plugin, mas como usá-lo quando você cria o mapa do google com a API JS em vez de usar um iframe?
Ikkez #

2
" Edit in JSFiddle Result JavaScript HTML CSS" É realmente parte do código?
Peter Mortensen

6

No meu caso, o crucial era definir 'scrollwheel':falseno init. Aviso: estou usando jQuery UI Map. Abaixo está o cabeçalho da função init do CoffeeScript :

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->

6

Caso você esteja usando a biblioteca GMaps.js , que simplifica um pouco a execução de geocodificação e pinos personalizados, veja como resolver esse problema usando as técnicas aprendidas nas respostas anteriores.

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}

4

Para alguém que se pergunta como desativar a API Javascript do Google Map

Ele vai permitir que o rolo de zoom se você clicar no mapa uma vez. E desabilite depois que o mouse sair da div.

Aqui está um exemplo

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>



3

Uma solução simples:

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>

Fonte: https://github.com/Corsidia/scrolloff


2

Apenas alguém está interessado em uma solução css pura para isso. O código a seguir sobrepõe uma div transparente sobre o mapa e move a div transparente para trás do mapa quando ele é clicado. A sobreposição impede o zoom, uma vez clicado, e atrás do mapa, o zoom está ativado.

Veja minha postagem no blog Os mapas do Google alternam o zoom com css para obter uma explicação de como funciona, e digite codepen.io/daveybrown/pen/yVryMr para obter uma demonstração funcional.

Isenção de responsabilidade: isso é principalmente para aprendizado e provavelmente não será a melhor solução para sites de produção.

HTML:

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS:

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

0

Use esse pedaço de código, que lhe dará todo o controle de cores e zoom do google map. ( scaleControl: false e scrollwheel: false impedirá que a roda do mouse aumente ou diminua o zoom)

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }


Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre como e / ou por que resolve o problema melhoraria o valor a longo prazo da resposta. Por favor, leia este tutorial para fornecer respostas de qualidade.
thewaywewere

0

Eu faço isso com esses exames simples

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

Ou use as opções gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false, 
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.