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
};
aaronrussell
fonte
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
Destaque em Developers Writing the Future por Joel Spolsky (CEO e co-fundador da Stack Overflow) , de 17 min 09 s - 18 min 25 s (07-12-2016).
Peter Mortensen

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.

Daniel Vassallo
fonte
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

Simon East
fonte
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.

Felipe Pereira
fonte
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

}
Creatif_IV
fonte
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').

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

Emiliano Díaz
fonte
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) ->
andilabs
fonte
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 });
}
racl101
fonte
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>

AlbertSamuel
fonte
4

Você só precisa adicionar opções de mapa:

scrollwheel: false
Kiran Kanzar
fonte
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

Darme
fonte
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;
}
Davey
fonte
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'
            });
          }

Chamon Roy
fonte
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, 
dimitar
fonte