google maps javascript api -- export polygons to kml?

Question

I am using the google maps javascript api to make polygons based on user input (I'm not using the Drawing library, just the straight-up v3). I want to be able to export these features to kml. However, there is nothing I can see in the javascript api that allows me to do this.

I know that maps engine lite has an "export to kml" feature.

Is there some google library I am missing that allows for exporting to kml? I've seen some solutions where the polygon's attributes are sent to a textarea and that is used to generate kml, but I'd much prefer using an existing library rather than making my own kml file.

Answer 1

The Blitz GMap Editor allows you to export KML (uses the drawing manager to create and edit them, but you could use your code).

Example

To KML code from Blitz GMap Editor. Depends on xmlwriter.js

this.toKML = function() {
  var result = mapToObject();
  var xw = new XMLWriter('UTF-8');
  xw.formatting = 'indented'; //add indentation and newlines
  xw.indentChar = ' '; //indent with spaces
  xw.indentation = 2; //add 2 spaces per level

  xw.writeStartDocument();
  xw.writeStartElement('kml');
  xw.writeAttributeString("xmlns", "http://www.opengis.net/kml/2.2");
  xw.writeStartElement('Document');

  for (var i = 0; i < result.overlays.length; i++) {
    xw.writeStartElement('Placemark');
    xw.writeStartElement('name');
    xw.writeCDATA(result.overlays[i].title);
    xw.writeEndElement();
    xw.writeStartElement('description');
    xw.writeCDATA(result.overlays[i].content);
    xw.writeEndElement();
    if (result.overlays[i].type == "marker") {

      xw.writeStartElement('Point');
      xw.writeElementString('extrude', '1');
      xw.writeElementString('altitudeMode', 'relativeToGround');
      xw.writeElementString('coordinates', result.overlays[i].position.lng.toString() + "," + result.overlays[i].position.lat.toString() + ",0");
      xw.writeEndElement();

    } else if (result.overlays[i].type == "polygon" || result.overlays[i].type == "rectangle" || result.overlays[i].type == "circle") {
      xw.writeStartElement('Polygon');
      xw.writeElementString('extrude', '1');
      xw.writeElementString('altitudeMode', 'relativeToGround');

      if (result.overlays[i].type == "rectangle") {
        //its a polygon
        xw.writeStartElement('outerBoundaryIs');
        xw.writeStartElement('LinearRing');
        xw.writeStartElement("coordinates");
        xw.writeString(result.overlays[i].bounds.sw.lng + "," + result.overlays[i].bounds.sw.lat + ",0");
        xw.writeString(result.overlays[i].bounds.ne.lng + "," + result.overlays[i].bounds.sw.lat + ",0");
        xw.writeString(result.overlays[i].bounds.ne.lng + "," + result.overlays[i].bounds.ne.lat + ",0");
        xw.writeString(result.overlays[i].bounds.sw.lng + "," + result.overlays[i].bounds.ne.lat + ",0");
        xw.writeEndElement();
        xw.writeEndElement();
        xw.writeEndElement();
      }
      if (result.overlays[i].type == "circle") {
        //its a polygon, approximate a circle by a circular 64 sided polygon.
        xw.writeStartElement('outerBoundaryIs');
        xw.writeStartElement('LinearRing');
        xw.writeStartElement("coordinates");
        var d2r = Math.PI / 180; // degrees to radians 
        var r2d = 180 / Math.PI; // radians to degrees 
        var earthsradius = 6378137; // 6378137 is the radius of the earth in meters
        var dir = 1; // clockwise

        var points = 64;

        // find the raidus in lat/lon 
        var rlat = (result.overlays[i].radius / earthsradius) * r2d;
        var rlng = rlat / Math.cos(result.overlays[i].center.lat * d2r);

        var extp = new Array();
        if (dir == 1) {
          var start = 0;
          var end = points + 1
        } // one extra here makes sure we connect the line
        else {
          var start = points + 1;
          var end = 0
        }
        for (var j = start;
          (dir == 1 ? j < end : j > end); j = j + dir) {
          var theta = Math.PI * (j / (points / 2));
          ey = result.overlays[i].center.lng + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
          ex = result.overlays[i].center.lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
          xw.writeString(ey + "," + ex + ",0");
        }
        xw.writeEndElement();
        xw.writeEndElement();
        xw.writeEndElement();
      } else {
        for (var j = 0; j < result.overlays[i].paths.length; j++) {
          if (j == 0) {
            xw.writeStartElement('outerBoundaryIs');
          } else {
            xw.writeStartElement('innerBoundaryIs');
          }
          xw.writeStartElement('LinearRing');
          xw.writeStartElement("coordinates");
          for (var k = 0; k < result.overlays[i].paths[j].length; k++) {
            xw.writeString(result.overlays[i].paths[j][k].lng + "," + result.overlays[i].paths[j][k].lat + ",0");
          }
          xw.writeEndElement();
          xw.writeEndElement();
          xw.writeEndElement();
        }
      }
      xw.writeEndElement();

    } else if (result.overlays[i].type == "polyline") {
      xw.writeStartElement('LineString');
      xw.writeElementString('extrude', '1');
      xw.writeElementString('altitudeMode', 'relativeToGround');
      xw.writeStartElement("coordinates");
      for (var j = 0; j < result.overlays[i].path.length; j++) {
        xw.writeString(result.overlays[i].path[j].lng + "," + result.overlays[i].path[j].lat + ",0");
      }
      xw.writeEndElement();
      xw.writeEndElement();

    }

    xw.writeEndElement(); // END PlaceMarker
  }

  xw.writeEndElement();
  xw.writeEndElement();
  xw.writeEndDocument();

  var xml = xw.flush(); //generate the xml string
  xw.close(); //clean the writer
  xw = undefined; //don't let visitors use it, it's closed
  //set the xml
  document.getElementById('kmlString').value = xml;
}