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
};
jquery
google-maps
google-maps-api-3
jquery-plugins
aaronrussell
fonte
fonte
Respostas:
Na versão 3 da API do Google Maps, você pode simplesmente definir a
scrollwheel
opção como false nas propriedades do MapOptions :Se você estivesse usando a versão 2 da API do Google Maps, teria que usar a chamada da API disableScrollWheelZoom () da seguinte maneira:
O
scrollwheel
zoom é 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 aenableScrollWheelZoom()
chamada da API.fonte
disableDefaultUI: true
pode substituirnavigationControl: false, mapTypeControl: false, scaleControl: false
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:
Consulte: Especificação do objeto MapOptions
fonte
scrollwheel
precisa ser todas as letras minúsculas (apenas me pego por upcasing o W)Apenas no caso de você querer fazer isso dinamicamente;
À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.
fonte
Mantenha simples! Variável original do Google Maps, nenhuma das coisas extras.
fonte
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 :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'
).fonte
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.
fonte
Edit in JSFiddle Result JavaScript HTML CSS
" É realmente parte do código?No meu caso, o crucial era definir
'scrollwheel':false
no init. Aviso: estou usandojQuery UI Map
. Abaixo está o cabeçalho da função init do CoffeeScript :fonte
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.
fonte
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
fonte
Você só precisa adicionar opções de mapa:
fonte
Uma solução simples:
Fonte: https://github.com/Corsidia/scrolloff
fonte
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:
CSS:
fonte
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)
fonte
Eu faço isso com esses exames simples
jQuery
CSS
Ou use as opções gmap
fonte