Apply event listener to an editable polygon

Question

How to add a event listener to a google maps editable Polygon when the user changes its boundary?

I tried the code below. Here is a Fiddle example

google.maps.event.addListener(PolygonPath, 'drag', function(e) {

        window.alert("Hi");

}); 

This is what I want:

code snippet (from linked fiddle):

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div id="map"></div>

<script>
  var PolygonPath;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 0,
        lng: 0
      }
    });

    PolygonPath = new google.maps.Polygon({
      strokeColor: '#FF8C00',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      editable: true,
      //geodesic: true,
      map: map
    });


    console.log(PolygonPath);


    google.maps.event.addListener(map, 'click', function(e) {
      addLatLng(e);
    });

    google.maps.event.addListener(PolygonPath, 'drag', function(e) {

      window.alert("Hi");

    });

  }


  function addLatLng(event) {
    pathLine = PolygonPath.getPath();
    pathLine.push(event.latLng);
    //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine);

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>

Answer 1

You need to add the event listener to the Polygon's path:

google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) {
  document.getElementById('info').innerHTML = PolygonPath.getPath().getAt(evt).toUrlValue(6);
});

There are three interesting events on an MVCArray (as they apply to a Polygon path):

• insert_at - add a vertex
• remove_at - delete a vertex
• set_at - change a vertex

code snippet implementing insert_at and set_at listeners on the Polygon path:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div id="info"></div>
<div id="map"></div>

<script>
  var PolygonPath;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 0,
        lng: 0
      }
    });

    PolygonPath = new google.maps.Polygon({
      strokeColor: '#FF8C00',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      editable: true,
      //geodesic: true,
      map: map
    });


    console.log(PolygonPath);

    google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) {
      document.getElementById('info').innerHTML = "insert:" + PolygonPath.getPath().getAt(evt).toUrlValue(6);
    })
    google.maps.event.addListener(PolygonPath.getPath(), 'set_at', function(evt) {
      document.getElementById('info').innerHTML = "set:" + PolygonPath.getPath().getAt(evt).toUrlValue(6);
    })
    google.maps.event.addListener(map, 'click', function(e) {
      addLatLng(e);
    });

    google.maps.event.addListener(PolygonPath, 'drag', function(e) {

      window.alert("Hi");

    });

  }


  function addLatLng(event) {
    pathLine = PolygonPath.getPath();
    pathLine.push(event.latLng);
    //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine);

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>