How to save map drawing state (Polygon, Polyline, Markers)

I want to enable drawing on Google Maps like (see this example) When user finish with drawings he will click on save button to save his drawings in Database or KML file, anything :) .. I do not know how to the save part? Could anyone help me

Solution

Here, http://jsfiddle.net/X66L4/1/ try drawing some circles, click on SAVE, then edit the circles by switching to the hand cursor and SAVE again to see the changes.

I show an example to save circles' data, the main idea is to keep a global array for each drawing type (line, polygon, marker, circle), and use a listener on the drawing manager to detect each type being drawn (complete).

  var circles = [];

  google.maps.event.addDomListener(drawingManager, 'circlecomplete', 
    function(circle) {
      circles.push(circle);
    });

The reason to save the entire reference to the drawn object is to continue tracking changes. So you will need an array and listener for each type of drawing.

Then, when you want to save the data (you may wish to do so at every edit), iterate through the arrays and extract the minimum information to rebuild it (center, radius, path, latLng, and so on.)

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
var myOptions = {
  center: new google.maps.LatLng(-25,177.5),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};


    var map;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.CIRCLE,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
      },
      circleOptions: {
        editable: true
      }
    });

      drawingManager.setMap(map);
      var circles = [];

      google.maps.event.addDomListener(drawingManager, 'circlecomplete', function(circle) {
        circles.push(circle);
      });

      google.maps.event.addDomListener(savebutton, 'click', function() {
        document.getElementById("savedata").value = "";
        for (var i = 0; i < circles.length; i++) {
          var circleCenter = circles[i].getCenter();
          var circleRadius = circles[i].getRadius();
          document.getElementById("savedata").value += "circle((";
          document.getElementById("savedata").value += 
            circleCenter.lat().toFixed(3) + "," + circleCenter.lng().toFixed(3);
          document.getElementById("savedata").value += "), ";
          document.getElementById("savedata").value += circleRadius.toFixed(3) + ")\n";

        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="savebutton">SAVE</button>
    <textarea id="savedata" rows="8" cols="40"></textarea>
    <div id="map_canvas"></div>
  </body>
</html>