Question

I have and interface where a user can manage multiple locations for their business, adding additional locations and removing locations they no longer need.

In my interface I show a list of locations each with their own map.

My question is how do I lock a map to prevent the user from panning or moving the marker until they click on the “edit location” button?

Is there any sort of toggleMapLock function?

So far I have the following two methods. The lock(); method works fine, but the unlock(); method doesn’t work for some reason.

lock: function() {
  this.map.disableDoubleClickZoom = true;
  this.map.draggable = false;
  this.map.keyboardShortcuts = false;
  this.map.navigationControl = false;
  this.map.scaleControl = false;
  this.map.scrollwheel = false;
  this.map.streetViewControl = false;
  this.marker.draggable = false;
},

unlock: function() {
  this.map.disableDoubleClickZoom = false;
  this.map.draggable = true;
  this.map.keyboardShortcuts = true;
  this.map.navigationControl = true;
  this.map.scaleControl = true;
  this.map.scrollwheel = true;
  this.map.streetViewControl = true;
  this.marker.draggable = true;
  console.log("unlock");  
},

Answer 1

disableDoubleClickZoom (and the other properties listed) are not public properties on the Map class – they are properties of the MapOptions class. To change their value you need something similar to the following:

lock: function() {
  this.map.setOptions({
    disableDoubleClickZoom: true,
    draggable: false
  });
},

unlock: function() {
  this.map.setOptions({
    disableDoubleClickZoom: false,
    draggable: true
  });
}

This creates a MapOptions object (inside the {}’s) and passes it to SetOptions, which updates the current state of the Map based on the values passed in.