Desativar a rolagem do Google Maps no layout de celular

Queremos que os usuários possam arrastar o mapa no layout do tablet / desktop, mas as telas do telefone são muito pequenas e, quando o usuário está rolando a página, ele repentinamente começa a arrastar dentro do mapa. Como o mapa ocupa quase toda a tela, ele está bloqueado no mapa e não é capaz de rolar mais para baixo na página.

Este é um problema muito simples com uma solução muito simples, mas a maioria das respostas que encontrei eram complexas, então decidi compartilhar esta dica:

No javascript onde você cria o mapa:

function initMap(){
    var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false

    var mapOptions = {
        draggable: isDraggable,

        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
        //... options options options
    };
}

Se você precisar que eles sejam capazes de navegar no mapa em dispositivos móveis, você pode definir panControl: trueda mesma maneira.

Claro, isso só define essa opção ao iniciar o mapa, portanto, quando os usuários redimensionam seu navegador para ‘layout móvel’, ele não muda. Se precisar disso, você pode ouvir o $(window).resize()evento e usar setOptions()para alterar o draggableparâmetro de acordo com suas necessidades, mas acho que isso não é útil, já que as pessoas – exceto para desenvolvedores da web – não navegam em sites com 480px de largura em um desktop;)