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

Answer 1

draggable: false

As stated in the API

Answer 2

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

Answer 3

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

Answer 4

Validate whether ontouchend is available in document.

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

Answer 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.

Answer 6

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.