pgm8xa
Last Updated: October 12, 2017
·
47.66K
· kennybrijs

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 ;)

15 Responses
Add your response

15874

Excellent! First Google search result and an immediate solution! Thanks for publishing this. Now all I have to do is find out how to replace the Google Map tooltips with Bootstrap tooltips - Basically need a way to inject data-toggle="tooltip", but it's currently doing my head in.

over 1 year ago ·
16223

Thanks, you saved me time! :)

over 1 year ago ·
16224

Great to hear this article helped you guys :)

@chrisbowyer: I'm a little too busy to look into it right now, were you able to find it yet?

over 1 year ago ·
16261

@kennybrijs: Unresolved

over 1 year ago ·
18072

It shows the pan controls on the tablet view, but the pan control does not respond when tapped. Am I missing something? I tested on an iPad Mini. Thx!

over 1 year ago ·
19189

works great thanks!

over 1 year ago ·
20074

Thanks - just what I was looking for!

over 1 year ago ·
20104

Thanks!

over 1 year ago ·
21118

Thank for share with us .. Save my time.
Keep it up Good Work

over 1 year ago ·
21121

Thx m8! ;)

over 1 year ago ·
21143

I am using wordpress plugin (ANK GOOGLE MAP), i found the javascript file but when i insert the code, it is still draggable. Please assist, thank you!

over 1 year ago ·
21811

Thx!

over 1 year ago ·
21813

Welcome ;)

For the people who need support, sorry guys, didn't expect this to get so much attention and got no time to help out with all the specific problems, hope the article helps most of you ;)

over 1 year ago ·
21876

May want to look at something like

var dragging = true;

if (Modernizr.touch) {
  dragging = false;
}

var args = {
  draggable: dragging
};

rather than base it on screen size.

over 1 year ago ·
22117

Good point @brettmarshall

over 1 year ago ·