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

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

Desativei o scaleControl (isto é, removi o elemento de UI de dimensionamento), mas isso não impede o dimensionamento da roda de rolagem.

Aqui faz parte da minha function (é 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 }; 

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

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

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

 map.disableScrollWheelZoom(); 

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

O código de Daniel faz o trabalho (graças a um monte!). Mas eu queria desabilitar o zoom completamente. Eu achei que tinha que usar todas as quatro opções para fazer isso:

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

Veja: especificação do object MapOptions

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ê tem que mostrar algo “complexo” sobre o mapa (ou o mapa é uma pequena parte do layout), e este zoom de rolagem fica no meio, mas quando você tem um mapa limpo, esta forma de zoom é legal.

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

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

No meu caso, o mais importante era definir em 'scrollwheel':false no init. Aviso: Estou usando o jQuery UI Map . Abaixo está o título da function init do CoffeeScript :

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

Apenas no caso, você está usando a biblioteca GMaps.js , o que torna um pouco mais simples fazer coisas como Geocodificação e alfinetes personalizados. Veja como você resolve esse problema usando as técnicas aprendidas com as 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 }); } 

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

Este plug-in desativa o iframe do Google Maps com uma div transparente de sobreposição e adiciona um botão para desbloquear. Você deve pressionar por 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; } 
   

"Start Scroll Prevent" "Stop Scroll Prevent"

A partir de agora (outubro de 2017), o Google implementou uma propriedade específica para lidar com o zoom / rolagem, chamado gestureHandling . Sua finalidade é manipular a operação de dispositivos móveis, mas também modifica o comportamento dos navegadores de desktop. Aqui é da 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 gestureHandling são:

  • 'greedy' : o mapa sempre se move (para cima ou para baixo, para a esquerda ou para a direita) quando o usuário passa a canvas (arrastando-se). Em outras palavras, tanto um toque com um dedo quanto um toque com dois dedos fazem o mapa se deslocar.
  • 'cooperative' : o usuário deve passar com um dedo para percorrer a página e dois dedos para deslocar o mapa. Se o usuário passar o dedo no mapa com um dedo, aparecerá uma sobreposição no mapa, com um aviso informando ao usuário para usar dois dedos para mover o mapa. Em aplicativos da área de trabalho, os usuários podem aplicar zoom ou deslocar o mapa rolando enquanto pressiona uma tecla modificadora (a tecla ctrl ou ⌘).
  • 'none' : essa opção desativa o movimento panorâmico e o aperto no mapa para dispositivos móveis e o arrastamento do mapa em dispositivos de desktop.
  • 'auto' (padrão): dependendo de a página poder ser rolada, a API JavaScript do Google Maps define a propriedade gestureHandling como 'cooperative' ou 'greedy'

Em suma, você pode facilmente forçar a configuração para “sempre zoomable” ( 'greedy' ), “nunca zoomable” ( 'none' ), ou “o usuário deve pressionar CRTL / ⌘ para habilitar o zoom” ( 'cooperative' ).

Para alguém que quer saber como desativar a API JavaScript do Google Map

Ele ativará a rolagem de zoom se você clicar no mapa uma vez. E desabilite após o mouse sair da div.

Aqui está algum 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; } 
    

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

 scrollwheel: false 

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

Veja minha publicação no blog Google Maps alternar zoom com css para uma explicação de como funciona, e caneta codepen.io/daveybrown/pen/yVryMr para uma demonstração de trabalho.

Disclaimer: isto é principalmente para aprender e provavelmente não será a melhor solução para sites de produção.

HTML:

 

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

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

Use esse pedaço de código, que lhe dará toda a cor e controle de zoom do google map. ( scaleControl: false e scrollwheel: false impedem que a roda do mouse suba ou desça)

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

Eu faço isso com este simples exame

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

 function init() { var mapOptions = { scrollwheel: false,