disable zooming dragging in Google maps by clicking on a button

Question

I want to add codes inside disable() function to disable dragging and zooming in Google maps API v3 by clicking on 'disable' button.

<script type="text/javascript">
   var map;

  function initialize() {
var uluru = new google.maps.LatLng(21, 57);
map = new google.maps.Map(document.getElementById("map"), {
  zoom: 6,
  center: uluru,
  mapTypeId: google.maps.MapTypeId.HYBRID
});
}


function disable(){

}

</script>


<body onload="initialize()" >

   <input type="button" id="next" value="disableZoomDrag" onclick="disable()">

</body>

score 139 · Accepted Answer · edited Aug 21 '12 at 03:59

139

You can use the setOptions() method on the map object:

map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});

If this doesn't prevent zooming, you could always set the minimum and maximum zoom to the current zoom level.

There is also the disableDefaultUI option, which probably takes all of these events into account, but it might disable clicking on existing elements.

edited Aug 21 '12 at 03:59

mauris

42,982
15
99
131

answered Nov 20 '11 at 20:39

ScottE

21,530
18
94
131

2

Just a note, you can also add these when initiating a new instance of the map object: `var map = new google.maps.Map(mapElement, mapOptions);` where `mapOptions` would be your options: `var mapOptions = {draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true};` – Oliver Tappin Mar 14 '17 at 21:32

Jasper · Answer 2 · 2017-12-23T12:32:27.223

@ScottE's answer pointed me in the right direction of using map.setOptions(). However, from the API documentation, I found that there is a more elegant set of options to set. Perhaps these are newer than the answer, but they work pretty well for me.

function disablePanningAndScrolling()
{
    map.setOptions({
        zoomControl: false,
        gestureHandling: 'none'
    });
}

This completely disables zooming and panning.

To return things to normal, just set the properties back to their defaults:

function enablePanningAndScrolling()
{
    map.setOptions({
        zoomControl: true,
        gestureHandling: 'greedy' // or 'cooperative'*
    });
}

*: the default is greedy if the page isn't scrollable, cooperative when it is. Pick whichever was the situation in your application.

disable zooming dragging in Google maps by clicking on a button

2 Answers2

Linked