Show and hide drawcontrols in NgMap - Google Maps

Question

I want to let a user click a button, to show the draw controls on a map. Once a circle, marker etc has been added, the draw controls are hidden again.

I am building an Angular app and I am using the NgMap directive (https://ngmap.github.io/)

My example code looks like this:

html:

<ng-map id="myMap">
    <drawing-manager 
        on-overlaycomplete="ctrl.onMapOverlayCompleted()"
                drawingControl="ctrl.showDrawControl">
        </drawing-manager>
</ng-map>

Controller:

vm.showDrawControl = true;
        NgMap.getMap({ id: 'myMap' }).then(function (map) {
            vm.onMapOverlayCompleted = function (event) {
                vm.showDrawControl = false;
                alert(vm.showDrawControl);
            }            
        });

The function is called on overlayComplete, but the controls are not hidden?

Answer 1

Examining the source code of ng-map I've seen that the observer to drawingControl attribute is missing, so it can't be updated after initial setup using Angular binding.

Two alternatives to resolve the issue:

1) patching ng-map.js adding the following code to drawingManager directive:

    attrs.$observe('drawingcontrol', function (newValue) {
        drawingManager.setOptions({
          drawingControl: (newValue=="true" ? true : false)
        });
    });

2) using directly Google maps API as stated here

    map.mapDrawingManager[0].setOptions({drawingControl:false/true})

Check my plunker for option 2:

http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR

P.S.: in the Plunker above you can see also a patched version of ng-map (however not used but tested as working).