I will generalize my idea to save coordinates when the user draws, then when the "Output KML" button is pressed, format the saved coordinate data and put it in the copied text area (if there is no way to call the download request?).
Here's how I save data when the user fills in a drawing element:
http://jsfiddle.net/8bwG2/
(I do not know a good way to detect changes.)
First add event listeners for each type of drawing (line, polygon, marker) to shoot when it is complete. For each type, you need a separate event listener. Here is one for Polylines, and each listener will return the type of drawing element that has just been completed.
google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) { path = line.getPath(); document.getElementById("action").value += "#polyline\n"; for(var i = 0; i < path.length; i++) { document.getElementById("action").value += path.getAt(i) + "\n"; } });
I place the coordinates directly in the general text box, but instead they should go into an array of variable arrays with one variable for polygons, one for polylines and one for markers.
When reading from these internal variables, convert LatLngs Google Maps to the KML format long, lat, heightitude. You will need to become creative with each name and description of the item.
Finally, when KML is requested, skip the marker, line, and polygon variable to generate KML format elements such as Point-coordinates, LineString, and Polygon-outerBoundaryIs