title: maps API v3 can't get change events after polygoncomplete
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#map{
    height: 500px;
    width: 500px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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");
    });
  }
  </code></pre>
  
  <p>I've also set up a codepen example <a href="http://codepen.io/adrfons/pen/apjmxy?editors=1111" rel="nofollow noreferrer">here</a>.</p>