I want to disable dragging of maps in tablet and mobile

var myOptions = {
                    zoom: 5,
                    scrollwheel: false,
                    center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

on pageload this is working fine.. but i want to be disabled for mobile devices.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}

this is not working though..let me know

I want to disable dragging of maps in tablet and mobile

var myOptions = {
                    zoom: 5,
                    scrollwheel: false,
                    center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

on pageload this is working fine.. but i want to be disabled for mobile devices.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}

this is not working though..let me know

• javascript
• jquery
• google-maps
• mobile

• what's not working? Do you see the alert? – duncan Commented Dec 3, 2014 at 10:30

4 Answers 4

Use a global variable at the start like

var drgflag=true;

then use your mobile detection code in which dragflag will set to false

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
alert(mobile);
map.setOptions({ 'draggable': false });
}

Then you can initialize your map

var myOptions = {
                    zoom: 5,
                    scrollwheel: false,
                    draggable:drgflag,
                    center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

I hope your mobile detection code works..

You can add it directly also

var myOptions = {
                zoom: 5,
                scrollwheel: false,
                center: new google.maps.LatLng(lat_mycustom, long_mycustom),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                draggable: false,
}

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

This person [included link] has added a button to enable/disable for mobile only.

It would be nicer if you could 'click' the map rather than a button. Apple's new '3D Touch' would be perfect for this as pressing harder could activate the drag behaviour of the map.

Perhaps you could adjust the style of the map to a lighter or darker shade depending the mode you were in?

https://gist.github./danhannigan/36d61b74ea457224b746

$( ".scroll-lock" ).click(function() {
  $( this ).toggleClass( "locked" );
    if ($(this).hasClass("locked")) {
        map.set('draggable', false);
    } else {
        map.set('draggable', true);
    }
});

simply add the following in your myOptions object for your map setting:

var myOptions = {
     ...
     draggable: !("ontouchend" in document),
     ...
}

This checks if the "ontouchend" event exists, if it does it means its a touch device, so disable dragging. However, things get a bit plicated on laptops with touchscreens.

Another option would be:

var sw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = sw > 1024 ? true : false;
var mapOptions = {
  draggable: isDraggable,
  scrollwheel: false
};

You basically check the width of the screen and if it's within the width span of a tablet, then disable dragging.