How to get new coordinates of the edited shape and calculate the center dynamically

Question

I'm using ngmap in my application. I was able to display a polygon from its coordinates using shape. Now I want to make this polygon editable. I referenced this link and my polygon is now editable. The problem is that I can't find how can I get the new coordinates.

Is there any events as onMapOverlayCompleted in the drawing-manager?

How can I get the new coordinates?

Also how can I calculate the value of the center attribute dynamically

Answer 1

It depends on the shape type, in case of Rectangle to determine the resized bounds you could utilize bounds_changed event. The following example demonstrates how to print the resized size of rectangle:

var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function (NgMap) {
    var vm = this;
    
    NgMap.getMap().then(function (map) {
            vm.map = map;
    });

    

    vm.rectShapeResized = function (e) {
        var rect = vm.map.shapes[0]; //get the first instance of shape
        console.log(rect.getBounds().toString());  //print a new bounds
    };
});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>


<div ng-app="myapp" ng-controller="DrawingManagerCtrl as vm">
    <ng-map zoom="7" center="48.8588377,2.2775177" map-type-id="ROADMAP" street-view-control-options="{position: 'LEFT_CENTER'}">
        
        <shape name="rectangle" 
          editable="true" on-bounds_changed="vm.rectShapeResized()" 
             bounds="[ [48.190, 2.649], [48.899, 3.443] ]">
          </shape>
    </ng-map>
</div>