pgm8xa
Last Updated: October 12, 2017
·
45.7K
· 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 ;)

Say Thanks
Respond

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
475329f816e4aed7cebc8aaf02ecc9f3 normal

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
92e7739ca82590401ad4ea448ff3e5d2 normal

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
None

works great thanks!

over 1 year ago ·
20074
None

Thanks - just what I was looking for!

over 1 year ago ·
20104
Tscyluh  normal

Thanks!

over 1 year ago ·
21118
Qznzr me normal

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
Vxyvfzkt normal

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
5198 106511783656 711913656 1990105 7823319 n normal

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
None

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 ·