For angular google maps how do I remove the polyline?

Question

For angular google maps how do I remove the polyline? I'm using angular version 1 with JavaScript in a directive using a templateUrl.

Version: angular-google-maps 2.1.5

This is my current HTML:

 <ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">
        <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="false" visible="polygonConfig.visible" editable="true" draggable="true" clickable="true" events="polygonConfig.events">
        </ui-gmap-polygon>

        <ui-gmap-markers coords="'self'" options="marker.options" models="compatiblePoints" idkey="'id'" clickable="true" click="markerClicked">
        </ui-gmap-markers>

        <ui-gmap-drawing-manager options="drawingManager" static="false" events="config.drawing.events">
        </ui-gmap-drawing-manager>
    </ui-gmap-google-map>

This is the img of the polyline drawn that I need to remove:

So far I've tried this on click of my clear map button:

scope.polygonConfig.events.setMap(null);

But I then get this console error:

"Cannot read property 'setMap' of undefined"

I've also tried this:

                   uiGmapIsReady.promise(1).then(function (instances) {
                        const map = instances.reduce(function(previous, current) {
                            return current.map;
                        });
                        scope.mapInstance = map;
                        map.setMap(null);
                    });

but I get this error: map.setMap is not a function

This is my most recent attempt:

              <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonManager.events">
              </ui-gmap-polygon>


                scope.polygonManager = {
                    events: {
                        rightclick: function(polygon) {
                          console.log("rightclick");
                          polygon.setMap(null);
                        },
                        dblclick: function(polygon) {
                          console.log("dblclick");
                          polygon.setMap(null);
                        }
                    }
                };

Duo

Possible duplicate of how to remove polyline on google map – Tyro

Still cannot remove the polygon line drawing – Duo

I've looked at your link – Duo

I basically want to set the polygon line to null or empty array. Another option is how would I reset the map to just clear it of all elements? – Duo

what object is .setMap function in? I can't find it to set it to null – Duo

Can you put this in a jsfiddle? Will be much easier to debug – Koziara

where your clear map button ? – Standish

Answer 1

Based on the documentation for ui-gmap-polygon:

events: Custom events to apply to the Polygon. This is an associative array, where keys are event names and values are handler functions. See Polygon events. The handler function takes four parameters (note the args are expanding on the original google sdk's default args):

1. Polygon: the GoogleMaps Polygon object

You can clear the polyline using events attribute of ui-gmap-polygon like this:

$scope.events = {
    rightclick: function(polygon) {
        polygon.setMap(null);
    }
};

<ui-gmap-polygon ... events="events"></ui-gmap-polygon>

This will cause a right click to remove the polygon from the map. There are also other events you can use to trigger this, and they are listed here: https://developers.google.com/maps/documentation/javascript/reference#Polygon
Look under the Events section

Edit: Here is an example demonstrating this functionality: http://plnkr.co/edit/t7zz8e6mCJavanWf9wCC?p=info

Recognize

This only gets rid of the shadow in the middle of the polygon and not the black polygon line. How do I remove the black polygon line as well? – Duo

I've added my most recent attempt above – Duo

@Duo it should work for both, can you show me an example where it doesn't? – Recognize