Getting a list of overlay shapes currently on the Google Maps API V3
I am using Google Maps API V3 Drawing Manager. google.maps.drawing.DrawingManager
I let the user draw on the map the number of circle overlays. Then when they hit the save button, I need to get the properties of all the circles and eventually do some server side magic with it.
How can I get a list of circles as objects or array ... etc using Javascript?
Below is the code where I create a DrawingManager and add the Circle tool to the control. I have followed more or less, this is https://developers.google.com/maps/documentation/javascript/reference#DrawingManager
if (drawingManager == null) {
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
},
circleOptions: {
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 5,
clickable: false,
draggable: true,
zIndex: 1,
editable: true
}
});
}
source to share
There is an overlayComplete event that will be dispatched after you finish drawing the overlay (in your case, it's a circle). You can process it and add the newly created object to your data structure eg. to an array that you can use to store objects and send them to the server. Try something like this:
//After creating 'drawingManager' object in if block
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
//Add 'event.overlay', which is Circle, to array
}
});
source to share