25 de abril, 2017 | 0 | Marcelo Torres

Desabilitar o zoom ao rolar o mouse por cima de um mapa do Google Maps incorporado

Por questão de usabilidade é bem ruim quando o usuário está rolando a página do site com um GMaps incorporado que ao invés de continuar rolando a página acaba ativando o zoom do mapa atrapalhando a navegação. Para resolver essa questão de forma simples você pode usar o comando pointer-events: none no iframe do mapa da sua CSS. Veja o exemplo abaixo.

See the Pen Desabilitar o zoom ao rolar o mouse por cima de um mapa do Google Maps incorporado by Marcelo Torres (@marcelotorres) on CodePen.0

Se achar necessário você pode manipular essa classe via javascript (neste caso eu usei JQuery) para quando o usuário clicar ativar a opção de zoom do mapa, você pode conferir isso no Pen acima também.

Sugestões, criticas e dúvidas favor comentar 🙂

Última atualização: 13 maio, 2017 às 9:10 pm