Using the ui-google-map docs plugin, you can get the google.maps.drawing.DrawingManager object using the control attributes (putting the object there)
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
and
$scope.drawingManagerControl = {};
The presence of this facility is the main work. Now you can see everything you need. For your case, you need overlaycomplete events, it will listen every time you draw a shape (=> polygon, circle, polyline)
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { var newShape = e.overlay; });
newShape is a new shape, a polygon in your case, so you can use it as a Polygon object and you can use everything you need in this link.
Now I want to select one of the polygons from the following image and want to delete or update it.
To do this, we select the selected polygon by assigning it in a global variable: for example var selectedShape;
And now add a click event listener for this drawn polygon and update it as selectedShape, and now you can use the selectedShape variable to delete or update.
var selectedShape; ... ... google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { var newShape = e.overlay; google.maps.event.addListener(newShape, 'click', function() { selectedShape = newShape; }); });
Finally, you can delete the selected shape by setting your map to zero selectedShape.setMap(null); and updating the form, setting it for editing to true shape.setEditable(true);
And finally, to make this click event possible, you need to add interactive options to true for all shapes. PS: Use the IsReady Service so that the card is ready to work on it.
Working plunker: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
Update:
But how to get all the coordinates of several polygons after editing or attract.
you already have this in a script, in polygonecomplete ($ scope.eventHandler). Now you can add it to the overlaycomplete event listener, and every time you update the form (see below code)
But the challenge is how to determine which polygon is being edited on map and how to update this particular polygon from my array
You can click an array for each figure created and control it:
... var allShapes = []; //the array contains all shape, to save in end .... //get path coords: I use your code there function getShapeCoords(shape) { var path = shape.getPath(); var coords = []; for (var i = 0; i < path.length; i++) { coords.push({ latitude: path.getAt(i).lat(), longitude: path.getAt(i).lng() }); } return coords; } .... google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { var newShape = e.overlay; google.maps.event.addListener(newShape, 'click', function() { selectedShape = newShape; }); ... // get coordinate of the polygon var shapeCoords = getShapeCoords(newShape); // pushing this shape to allShapes array allShapes.push(newShape); });
in the delete function you can remove the id at the selectedShape index
//delete selected shape function deleteSelectedShape() { if (!selectedShape) { alert("There are no shape selected"); return; } var index = allShapes.indexOf(selectedShape); allShapes.splice(index, 1); selectedShape.setMap(null);
}
Now you have an array of allShapes, and in the end you can encode it, then get it for each coordinate and save it in your db.
I updated the plunker and added that the debug log really shows.