For angular google maps how do I remove the polyline?

All we need is an easy explanation of the problem, so here it is.

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:

enter image description here

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);
                        }
                    }
                };

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply