Disable Google Maps scrolling on mobile layout

Disable Google Maps scrolling on mobile layout

We want users to be able to drag the map on the tablet/desktop layout, but phone screens are too small, and when the user is scrolling the page he/she suddenly starts dragging inside the map. Since the map takes up almost all of the screen he/she is locked on the map and not able to scroll further down the page.

This is a pretty simple problem with a pretty simple solution, but most answers I found were complex, so I decided to share this tip:

In the javascript where you create the map:

function initMap(){
    // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false
    var isDraggable = $(document).width() > 480 ? true : false;
    var mapOptions = {
        draggable: isDraggable,
        scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page

        //... options options options
    };
}

If you need them to be able to navigate the map on mobile devices, you could set panControl: true in the same manner.

Of course, this only sets this option when initiating the map, so when users resize their browser to ‘mobile layout’ it doesn’t change. If you need this you could listen to the $(window).resize() event and then use setOptions() to change the  draggable  parameter according to your needs, but I think that’s not useful since people —except for web developers— don’t browse websites at 480px wide on a desktop 😉

Written by
Kenny Brijs

Source: Coderwall | Disable Google Maps scrolling on mobile layout