Question

I am using the Google Maps Drawing Manager of API V3. google.maps.drawing.DrawingManager

I am letting the user draw a number of circle overlays on the map. Then when they click on a ‘Save’ button, I need to be able to get the properties of all the circles and eventually do my server side magic with it.

How can I get the list of circles, as objects or array … etc.., using Javascript?

Below is the code where I am creating the DrawingManager and adding the Circle tool to the control. I was following more or less, this 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
        }
    });
}

Answer 1

There is an event overlayComplete which will be dispatched after you finished drawing an overlay(in your case it is circle). You can handle it and add newly created object to data structure, e.g. to array, which you can use to store the objects and send them to 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
      }
  });