Wie füge ich einem bearbeitbaren Google Maps-Polygon einen Ereignis-Listener hinzu, wenn der Benutzer seine Grenze ändert?

Ich habe den folgenden Code ausprobiert.Hier ist ein Geigenbeispiel

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

        window.alert("Hi");

}); 

Das ist was ich will:

Code-Snippet (von verknüpfter Geige):

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>