maps API v3 can't get change events after polygoncomplete

Question

I have a map I want to draw polygons on, using the googlemaps API v3. If I draw a polygon by itself, I can get the onChange events on the getPath() for the polygon without issue; but if I want to let the user draw the polygon, I then am unable to grab the onChange events from the polygon.

My idea was to create two empty polygons and use one for the drawingManager; once the drawingManager's polygon triggers polygonComplete, I copy its path to the other polygon and get rid of the drawingManager, but that's not working.

html:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing" type="text/javascript"></script>

css:

#map{
  height: 500px;
  width: 500px;
}

JS:

if (document.getElementById('map')){  

  var mapOptions = {
    zoom: 6,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var field = new google.maps.Polygon({
    paths: [],
    editable: true
  });

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    polygonOptions: {
      editable: false
    },
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setOptions({
      drawingMode: null,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: []
      }
    });
    field.setPath(polygon.getPath().getArray());
    polygon.setMap(null);
    polygon = null;
    field.setMap(map);
  });

  google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
    // changed point, via map
    console.log(field.getPath());
    console.log("a point has changed");
  });
  google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
    // new point via map
    console.log(field.getPath());
    console.log("a point has been added");
  });
  google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
    //removed point, via map
    console.log(field.getPath());
    console.log("a point has been removed");
  });
}

I've also set up a codepen example here.

score 2 · Accepted Answer · edited May 23 '17 at 12:16

You need to move the code that adds the event listeners inside the polygoncomplete event handler function.

Related question: Javascript google maps drawing events.

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  drawingManager.setOptions({
    drawingMode: null,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: []
    }
  });
  field.setPath(polygon.getPath().getArray());
  polygon.setMap(null);
  polygon = null;
  field.setMap(map);
  google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
    // changed point, via map
    console.log(field.getPath());
    console.log("a point has changed");
  });
  google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
    // new point via map
    console.log(field.getPath());
    console.log("a point has been added");
  });
  google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
    //removed point, via map
    console.log(field.getPath());
    console.log("a point has been removed");
  });
});

proof of concept fiddle

code snippet:

var map;

function initialize() {
  if (document.getElementById('map')) {

    var mapOptions = {
      zoom: 6,
      center: {
        lat: 24.886,
        lng: -70.268
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var field = new google.maps.Polygon({
      paths: [],
      editable: true
    });

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

    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      polygonOptions: {
        editable: false
      },
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
      drawingManager.setOptions({
        drawingMode: null,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: []
        }
      });
      field.setPath(polygon.getPath().getArray());
      polygon.setMap(null);
      polygon = null;
      field.setMap(map);
      google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
        // changed point, via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has changed");
      });
      google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
        // new point via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has been added");
      });
      google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
        //removed point, via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has been removed");
      });
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

#map {
  height: 500px;
  width: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map"></div>

maps API v3 can't get change events after polygoncomplete

1 Answers1