Last Updated: October 12, 2017
· 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


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 ·

Thanks, you saved me time! :)

over 1 year ago ·

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 ·

@kennybrijs: Unresolved

over 1 year ago ·

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 ·

works great thanks!

over 1 year ago ·

Thanks - just what I was looking for!

over 1 year ago ·


over 1 year ago ·

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

over 1 year ago ·

Thx m8! ;)

over 1 year ago ·

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 ·


over 1 year ago ·

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 ·

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 ·

Good point @brettmarshall

over 1 year ago ·