title: Google Maps: Applying Event Listeners
body: <p>I need to keep track of coordinates of drawn shapes while using Google Maps drawing mode. I can add event listeners once a shape is drawn (e.g. polygon) to log the given ID and coordinates in both <code>click</code> and <code>dragend</code> events, but they won't work when editing the shape (e.g. <code>insert_at</code>, <code>remove_at</code>, <code>set_at</code>). </p>
  
  <pre><code>var shapeID = 1;
  
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setDrawingMode(null);
  
    polygon.setOptions({ id: shapeID, editable:true, draggable:true });
  
    google.maps.event.addListener(polygon, 'click', function() {
      console.log(this.id+' '+this.getPath().getArray().toString());
    });
  
    google.maps.event.addListener(polygon, 'dragend', function() {
      console.log(this.id+' '+this.getPath().getArray().toString());
    });
  
    google.maps.event.addListener(polygon, 'insert_at', function() {
      console.log(this.id+' '+this.getPath().getArray().toString());
    });
  
    google.maps.event.addListener(polygon, 'remove_at', function() {
      console.log(this.id+' '+this.getPath().getArray().toString());
    });
  
    google.maps.event.addListener(polygon, 'set_at', function() {
      console.log(this.id+' '+this.getPath().getArray().toString());
    });
  
    shapeID++;
  });
  </code></pre>
  
  <p>Setting the polygon options works fine; if you click on the polygons their correct shapeID is logged in the console.</p>
  
  <p>My problem is that I want to add an event like this:</p>
  
  <pre><code>google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
  google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
  google.maps.event.addListener(polygon.getPath(), "set_at", getPath);
  
  function getPath() {
    var path = polygon.getPath();
    var len = path.getLength();
    var coordStr = 'id: '+polygon.id+'\n';
    for (var i=0; i&lt;len; i++) {
      coordStr += path.getAt(i).toUrlValue(6)+"\n";
    }
    console.log(coordStr);
  }
  </code></pre>
  
  <p>But I can't access the shapes by their assigned shapeID. Google Maps isn't letting me assign the polygon ID in the string:</p>
  
  <pre><code>google.maps.event.addListener(POLYGON_ID.getPath(), "insert_at", getPath);
  </code></pre>
  
  <p>I get an error that says "a is not defined".</p>