javascript - disable draggable on google maps in mobile - Stack Overflow

admin管理员组

文章数量:1427321

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

Share Improve this question Follow edited Jan 26, 2019 at 15:04 Cœur 38.8k2525 gold badges206206 silver badges279279 bronze badges asked Dec 3, 2014 at 10:05 user8025user8025 9911 silver badge99 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

本文标签： javascriptdisable draggable on google maps in mobileStack Overflow