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(){
    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
    };
}

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 webdevelopers—don’t browse websites at 480px wide on a desktop ;)