CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Green
Green

Reputation: 30805

How to add an event listener on the button of DrawingManagerControl?

I want to catch a click event on Draw Polygon button. But the DrawingManager API provides only overlaycomplete events (polygoncomplete, circlecomplete, etc). How may I add a click event on those buttons? Particularly I want to forbid to draw the second polygon if one polygon shape is already on the map. So I want add a click handler to Draw Polygon button and return negative response.

UPD:

So I did as follows:

onDrawingmode_changedListener = google.maps.event.addListener(drawingManager, 'drawingmode_changed', function(e) {
   if(this.getDrawingMode() == "polygon") {
      if(polygon) {
         alert("You already have one polygon shape on the map. Remove it in order to draw a new one.");
         this.setDrawingMode(null);
      }
   }
});

Upvotes: 3

Views: 749

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

There is no implemented way to access these controls. you have 2 options:

  1. observe the drawingmode_changed-event of the DrawingManager-instance. When the drawingmode is set to google.maps.drawing.POLYGON, set it to null (it will no longer be possible to draw a polygon)

  2. update drawingManager.drawingControlOptions.drawingModes . Set it to an array that contains all overlay-types except google.maps.drawing.POLYGON (this will remove the POLYGON-control ) . Here also set the drawingmode to null

Explanation of the drawingmode_changed-event:

An DrawingManager-instance is an MVCObject. MVCObjects have build-in property-setters(set() and setValues()). The Maps-API uses these setters to set properties. Each time you use these methods an event will be triggered with a name that conist of the property-name and the string _changed (e.g. when you set a property weather of an MVCObject via the setter, an event weather_changed will fire). This also happens when you use the specific setter-functions( setZoom, setCenter, setMap etc.).

So you may assume that for each property of an MVCObject the _changed-event will fire as long as the setters will be used(applies to built-in properties and custom properties ), no matter if the event is documented or not.

Example:

        google.maps.event.addListener(map,'weather_changed',function(){
          alert('it\'s '+this.get('weather'));
        });
         //this will fire a weather_changed-event
        map.set('weather','rainy');
         //this will not fire an event, because it doesn't use a setter-method
        map.weather='rainy';

Upvotes: 3

Related Questions