How can I disable scrolling on the Google Maps mobile layout?

Question

I am developing mobile sites with Google Maps embedded via the Google Maps API. I have been able to stop certain types of behavior but have been unable to find a good way to stop the map from scrolling as I finger scroll down the page on the iPhone. Here is the code I am using:

<script>
function initialize() {
  var mapElem = document.getElementById("map"),
      myOptions = {
        zoom: 13,
        center: new google.maps.LatLng(41.8965,-84.063),
        navigationControl: true,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL,
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        streetViewControl: false,
        mapTypeControl: false,
        disableDoubleClickZoom: true,
        scrollwheel: false,
        backgroundColor: '#f2efe9',
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(mapElem, myOptions);
}
</script>
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script>

Thanks in advance.

Blog post on the subject: [Disable Google Maps scrolling on mobile layout](https://coderwall.com/p/pgm8xa) — User, Mar 18 '14 at 01:01

score 54 · Answer 1 · edited Mar 09 '16 at 20:41

54

Validate whether ontouchend is available in document.

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);

edited Mar 09 '16 at 20:41

likeitlikeit

5,563
5
42
56

answered Dec 09 '15 at 14:34

Frankey

3,679
28
25

The best answer! Thanks! – Yura Loginov Mar 17 '16 at 14:16
This does not work for me anymore. I have seen on several different computers running windows 10 and chrome have that. – phillc Jan 27 '17 at 19:25

score 39 · Answer 2 · edited Mar 11 '16 at 09:21

39

draggable: false

As stated in the API

edited Mar 11 '16 at 09:21

Iharob Al Asimi

52,653
6
59
97

answered Dec 25 '10 at 18:03

Mantar

2,710
5
23
30

1

that drops live dragging functionality but doesn't stop the map from removing the default touch-move. I need the map embed to stop accepting the touch-move event. – Brad Birdsall Dec 25 '10 at 20:20
My first suggestion would be to just disable touch events on the view. However assuming you're working with multiplatform, may I suggest a static map instead? http://code.google.com/apis/maps/documentation/staticmaps/ – Mantar Dec 25 '10 at 20:53

score 9 · Answer 3 · answered Apr 15 '16 at 06:43

9

In your css:

    pointer-events: none;

answered Apr 15 '16 at 06:43

Pablo Cegarra

20,955
12
92
110

1

This is by far the best answer - use media queries instead of js to sort it out – sethherr May 09 '16 at 09:38
While it works, i usually avoid this method because it is not yet in the HTML5 standard, even though most browsers extend this functionality from SVG to HTML anyway. See: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Browser_compatibility – henry700 Aug 14 '16 at 19:34
Unfortunately this solution disables all touch controls with the map, not just scrolling as per the OP's question. The zoom buttons are rendered useless, as well as all the other links displayed on Google Maps such as Google reviews, contact details, switching map mode views and 'View larger map', so not a great solution for most people. – Jamie Wade Sep 26 '16 at 13:41

score 7 · Answer 4 · edited May 23 '17 at 10:31

7

You can also try a) a server side mobile detection liked mentioned here and then b) include it in your .php (e.g. header.php or footer.php) file, like so:

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

Embed it in your code:

var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(12.345, 12.345),
        scrollwheel: false,
        <?php echo(isMobile()) ? 'draggable: false' : ''; ?>
    };

Note that this of course only works if you have Google Maps Javascript code embedded in your php file.

edited May 23 '17 at 10:31

Community

1
1

answered May 12 '14 at 13:59

Mike

2,686
7
44
61

It looks like you've put a bracket in the wrong place. Did you mean ``? – Beetle Jun 17 '15 at 17:37
Hi Beetle, the brackets in my example should be correct (it is recommended to avoid "stacking" ternary expressions. PHP's behaviour when using more than one ternary operator within a single statement is non-obvious. Please also see http://php.net/manual/en/language.operators.comparison.php) – Mike Sep 06 '15 at 21:26

score 5 · Answer 5 · answered May 19 '17 at 03:24

5

Add this to your myOptions list:

gestureHandling: 'cooperative'

This is from the Google Maps JS API documentation. I implemented a similar functionality on my mobile maps web app.

answered May 19 '17 at 03:24

brainsexyapril

51
1
3

score 1 · Answer 6 · answered Apr 07 '16 at 08:59

1

i am a newb, so i give an noob answer:

try putting the width at 90%, so you allow space for the finger to go down and up witout touching the map.

For me it worked :)

answered Apr 07 '16 at 08:59

Victor Catalin Torac

29
4

I think it's always valid to look at an alternative solution as well – Grant Jan 14 '19 at 09:55

score 0 · Answer 7 · edited May 23 '17 at 12:34

0

I had the same problem and found the answer in another StackOverflow question. That solution worked for me with my map on my Android using Chrome at least.

Embed Google Maps on page without overriding iPhone scroll behavior

edited May 23 '17 at 12:34

Community

1
1

answered Aug 22 '12 at 14:14

tommycode

163
3
6

score 0 · Answer 8 · edited Feb 15 '16 at 13:48

This is how I solved it with media query responsive techniques.

HTML at the footer of the page (just above </body>):

<div class="jrespond"></div>

CSS:

.jrespond{
  width: 30px;
}

@media only screen and (max-width: 991px){
  .jrespond{
    width: 20px;
  }
}

@media only screen and (max-width: 767px){
  .jrespond{
    width: 10px;
  }
}

JavaScript:

if(jrespond == 10){
  // Do mobile function
}

if(jrespond == 20){    
  // Do tablet function
}

if(jrespond >= 30){
  // Do desktop function
}

**/// Google** map snippet
var isDraggable = true;
if(jrespond == 10){
  var isDraggable = false;
}

var myOptions = {    
  zoom: 12,
  center: myLatlng1,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  draggable: isDraggable
}

How can I disable scrolling on the Google Maps mobile layout?

8 Answers8

Linked