Desative o Ctrl + Scroll para ampliar o Google Maps

95

Alguém sabe como desativar o CTRL+ Scroll?

Primeiro, quando a roda do mouse fosse movida, o mapa aumentaria / diminuiria o zoom. Mas agora ele pede para pressionar CTRL+ Rolagem da roda do mouse para aumentar / diminuir o zoom.

Como desabilitamos esse recurso? Não consigo encontrar nada na documentação:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

javascript google-maps

— Dawood Awan
fonte

este link pode ajudá-lo a stackoverflow.com/questions/21992498/…

— Brajesh Kanungo

@BrajeshKanungo que não está relacionado ao recurso acima - este é um novo recurso introduzido pelo Google Maps - eu quero desativá-lo.

— Dawood Awan de

Ok, você pode me dizer qual versão da API você está usando.

— Brajesh Kanungo de

a versão mais recente - maps.googleapis.com/maps/api/js?v=3.exp

— Dawood Awan

Isso acabou de aparecer em nosso site também, então provavelmente uma atualização na API do googles

— Tom

153

Você precisa passar gestureHandling: 'greedy'para as opções do mapa.

Documentação: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

Por exemplo:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});

Atualizar! Desde o Google Maps, 3.35.6você precisa encerrar a propriedade em um invólucro de opções:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

Obrigado ealfonsopela nova informação

— kano
fonte

@DiegoAndrade Não estou ciente dos detalhes. talvez não tenha sido implementado naquela época. Mas está presente nas versões 3.29(congelada), 3.30(lançamento) e superiores ( 3.exp, experimental).

— kano

Sim @Kano, nesses documentos esse recurso ainda está presente, mas em meus testes aqui não está funcionando. Eu realmente não sei por que eles removeram isso :(

— Diego Andrade

1

Eu sei que está presente. Essa é a questão. Começando com 3.30Não está funcionando. Testei todas essas versões. De qualquer forma, está funcionando agora com 3.26.

— Diego Andrade

3

finalmente a resposta certa. Levei muito tempo pesquisando para isso. Por que o Google não fez isso o padrão está além de mim.

— quarta

2

Bingo, esta é a solução perfeita.

— N Khan de

17

Se concordar em desativar totalmente a rolagem para zoom, você pode usar scrollwheel: false. O usuário ainda poderá ampliar o mapa clicando nos botões de zoom se você fornecer a eles o controle de zoom ( zoomControl: true).

Documentação: https://developers.google.com/maps/documentation/javascript/reference (pesquise "scrollwheel" na página)

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});

— Brendan Benson
fonte

7

Se você deseja ocultar apenas a sobreposição, mas ainda desabilitar a capacidade de rolar e aplicar zoom (como antes), pode usar CSS para ocultar a sobreposição:

.gm-style-pbc {
opacity: 0 !important;
}

Observe que isso também o ocultará para dispositivos móveis, então você pode usar algo assim para garantir que mostre "use dois dedos para mover o mapa":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}

— Chumtarou
fonte

Obrigado. Estou surpreso que mais pessoas não queiram isso. É uma mensagem de sobreposição muito perturbadora que virtualmente destrói a experiência do mapa para mim.

— BaseZen

5

Aninhar gestureHandlingdentro de uma optionspropriedade funcionou para mim na versão "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });

— ealfonso
fonte

4

Não consegui fazer a gestureHandling: 'greedy'correção funcionar para mim, pois tinha uma sobreposição sobre o mapa. Acabei detectando o mousewheelevento e definindo a ctrlpropriedade como true.

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);         

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}

— MisterMystery
fonte