Search code examples
google-mapsgoogle-maps-api-3ng-map

ngMap/Google Maps Api v3: call function when shape edited


I have an issue with ngMap and a shape.

A shape can have the two different properties, draggable or editable.

The editable adds a point in the middle of the circle to drag it around. And 4 points on the outside to change the size of the radius. As can be seen here: EDITABLE https://ngmap.github.io/#/!shape_circle_with_current_position.html

The draggable can be seen here: DRAGABLE https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/events.html

<ng-map zoom="11" center="current-position">
    <shape draggable="true" on-dragend="someFunction()"></shape>
</ng-map>

With draggable I can use the "on-dragend" directive(is this a directive?) when I drag it around. But I dont know what directive I can use with editable="true".

<ng-map zoom="11" center="current-position">
        <shape ??on-edit??="someFunction()" editable="true"></shape>
</ng-map>

I want to call a function when the Shape has been edited so I can update my "radar" and "lat", "lon" values. Something like on-edit , on-change? I tried to brute force a little bit already :D

Thanks!


Solution

  • Use "on-center_changed" for the position of the circle and: "on-radius_changed" for the radius.

    Documented here: https://developers.google.com/maps/documentation/javascript/reference?hl=de#InfoWindow

    <ng-map zoom="11" center="current-position">
            <shape on-radius_changed="vm.radiusChanged()" on-center_changed="vm.centerChanged()" editable="true"></shape>
    </ng-map>