How Can I Disable Scrolling On The Google Maps Mobile Layout?

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 t

Solution 1:

Validate whether ontouchend is available in document.

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

Solution 2:

draggable:false

As stated in the API

Solution 3:

In your css:

pointer-events: none;

Solution 4:

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:

functionisMobile() {
    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,
        <?phpecho(isMobile()) ? 'draggable: false' : ''; ?>
    };

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

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