Draw polygon using ngmap

Question

I'm trying to draw polygon on my map using ngmap. The map is displayed correctly as this example is showing, but when I finish the draw, this is what I'm getting:

ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined

I used the same code of the example.

My questions:

1- How can I solve this error?

2- If I want to let the user draw only polygon form, I have tried to set the value of drawingMode to "polygon" but I'm always having the other draw options (circle...). How can let only the polygon draw?

3- How can I let the user clear the drawn polygon?

4- Is it possible to detect the action of putting (drawing) every points. I mean that to draw a line in the polygon for example I need at least two points. Can I detect when the user draw the first point then the second and get its coordinates?

Edit

This is the whole error that I see when I include ng-map.js instead of ng-map.min.js :

Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
    at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44)
    at Array.reduce (native)
    at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39)
    at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
    at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70)
    at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249)

Edit 2

I solved the first question:

My problem was that I'm using routes in the app.js. So the html and the controller are linked in it. To solve the problem, I put $scope.onMapOverlayCompleted instead of var vm = this; vm.onMapOverlayCompleted because I don't write the the ng-controller="DrawingManagerCtrl as vm" in my HTML. Then in the HTML I put on-overlaycomplete="onMapOverlayCompleted()" and it works.

I solved also the second question by using:

 drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"

I'm want now to solve the other problems.

Any help please?

please include `ng-map.js` to see detail of the error, not `ng-ma-.min.js`. — Pengyy, May 03 '17 at 02:38
You need to share more of your code for us to be able to help. Especially the controller and HTML containing the map — Matej P., May 03 '17 at 09:26
It works now thank you. My problem was that I'm using routes in in app.js. So the html and the controller are linked in it. To solve the problem, I put `$scope.onMapOverlayCompleted` instead of `var vm = this; vm.onMapOverlayCompleted` because I don't write the the `ng-controller="DrawingManagerCtrl as vm"`. Then in the html I put `on-overlaycomplete="onMapOverlayCompleted()"` — Ne AS, May 03 '17 at 09:34

score 0 · Accepted Answer · edited May 23 '17 at 11:47

3

As the example you referenced shows, the overlaycomplete callback function receives e (Event) as the first parameter. This OverlayCompleteEvent object contains reference to the drawn overlay at Event.overlay (see docs of the original Google Maps JS API more info, since ng-map is only wrapper of the original API after all, specifically "OverlayCompleteEvent object specification" section).

Using that you can get the reference to the created overlay, store it and then later call .setMap(null) on it to delete it from map. E.g:

$scope.myDrawnOverlays = []; //array where you store drawn overlays
$scope.onMapOverlayCompleted(e){
    ...
    myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn
}
$scope.deleteAllDrawnOverlays(){
    for(var i = 0; i < myDrawnOverlays.length; i++){
        myDrawnOverlays[i].setMap(null); //remove overlays from map one by one
    }
    myDrawnOverlays = [];
}

Then whenever you want to delete all overlays, just call the function $scope.deleteAllDrawnOverlays (you can tie it to some button using ng-click or do whatever you want with it).

4

This is NOT possible using google.maps.drawing.DrawingManager which is used in your example. The reason is that DrawingManager doesn't support events for clicking at the map while drawing (see docs again for possible events, section "DrawingManager class").

So except hacky workarounds which could break any time with new api release, the only possible solution is to implement drawing of polygon yourself and not use DrawingManager. Check for example this SO answer, specifically the referenced example (right-clicks on map). They don't use ng-map, but basically what would you have to do is to add on-click="mapClickHandler" to your ng-map, in the mapClickHandler get position where you clicked on map, draw Marker there which would look like a dot and if you have more dots connect them with lines.

This is however too much for one question, you would have to probably read up on ng-map and relevant sections of Google Maps Js Api yourself.

Draw polygon using ngmap

1 Answers1

Linked