Listening for the set_at event using ui-gmap-polygon

Question

I am currently using the DrawingManager so that users can draw shapes on a map. Once the shape is drawn, I set the listener on the polygon path so that I can respond after changing the path:

 var polygonPath = event.overlay.getPath(); google.maps.event.addListener(polygonPath, 'set_at', function () { // my code... }); 

This works great when the user adds a new shape using the paint tool. However, if I already have polygons in my database, which I show with the ui-gmap-polygon AngularJS directive (from the angular-google-maps project), how can I listen to the set_at event, since this event is not in polygon , but instead on the polygon path ( MVCArray )?

The only place I could find the set_at link in the angular-google-maps project source code was in array-sync.coffee , but it doesn’t look like it is being displayed.

If I cannot listen to the set_at event directly with the directive, I hope that an event will occur that fires when the directive creates a polygon so that I can then get the path of the polygon and then add a listener to the same as the code above.

I put together a JSFiddle with a basic structure along with an events object. It currently handles polygon and mouse manipulation, but not the set_at event.

Answer 1

Try the approach below.

 directive('uiGmapPolygon', function ($timeout) { return { restrict: 'E', link: function (scope, element, attrs) { // Make sure that the polygon is rendered before accessing it. // next two lines will do the trick. $timeout(function () { // I know that properties with $$ are not good to use, but can't get away without using $$childHead scope.$$childHead.control.promise.then(function () { // get the polygons var polygons = scope.$$childHead.control.polygons; // iterate over the polygons polygons.forEach(function (polygon) { // get google.maps.Polygon instance bound to the polygon var gObject = polygon.gObject; // get the Paths of the Polygon var paths = gObject.getPaths(); // register the events. paths.forEach(function (path) { google.maps.event.addListener(path, 'insert_at', function () { console.log('insert_at event'); }); google.maps.event.addListener(path, 'remove_at', function () { console.log('remove_at event'); }); google.maps.event.addListener(path, 'set_at', function () { console.log('set_at event'); }); }) }) }) }); } } }) 

Working plnkr

Answer 2

You need to set event listeners on the polygon path.

You can use the forEach () method of MVCArray to specify each path of your polygon.

 function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(40, 9), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var polygon = new google.maps.Polygon({ editable: true, strokeOpacity: 0, strokeWeight: 0, fillColor: '#00FF00', fillOpacity: .6, paths: [ new google.maps.LatLng(39, 4), new google.maps.LatLng(34, 24), new google.maps.LatLng(43, 24), new google.maps.LatLng(39, 4)], map: map }); // Get paths from polygon and set event listeners for each path separately polygon.getPaths().forEach(function (path, index) { google.maps.event.addListener(path, 'insert_at', function () { console.log('insert_at event'); }); google.maps.event.addListener(path, 'remove_at', function () { console.log('remove_at event'); }); google.maps.event.addListener(path, 'set_at', function () { console.log('set_at event'); }); }); } initialize(); 

Jsfiddle demo