CODEWITHSUNDEEP
javascriptgoogle-maps
user3882976
user3882976

Reputation: 105

Exporting google maps api circle to kml

Im trying to export the circle into kml format and put in in the text area to download. Is this possible to do it with the google maps api? Do I need to login to google and create a map in there or can I do it with javascript.

 <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
          html, body, #map-canvas {
            height: 700px;
            width: 1400px;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
        <script>
            var map;
            function initialize() {
              var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(42.364294, -71.061730)
              };
            map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
      </head>
      <body>
        <div id="map-canvas"></div>
            <form onsubmit="download(this['name'].value, this['text'].value)">
                <input type="text" name="name" value="test.kml">
                <textarea name="text" value= ""></textarea>
                <input type="submit" value="Download">
            </form>
            <form onsubmit="plotPoint(this['latitude'].value, this['longitude'].value, this['radius'].value); return false">
                Latitude: <input type="text" name ="latitude">
                Longitude:<input type="text" name ="longitude">
                Radius: <input type="text" name ="radius">
                <input type="submit" value="Plot Point">
            </form>
            <script>

            function download(filename, text) {
              var pom = document.createElement('a');
              pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
              pom.setAttribute('download', filename);

              pom.style.display = 'none';
              document.body.appendChild(pom);

              pom.click();

              document.body.removeChild(pom);
            }

            function plotPoint(latitude, longitude, radius){
                var myLatlng = new google.maps.LatLng(latitude, longitude );
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                });

                console.log(radius);
                var circleOptions = {
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.35,
                  map: map,
                  center: myLatlng,
                  radius: parseFloat(radius)
                };
                // Add the circle for this city to the map.
                circle = new google.maps.Circle(circleOptions);
            }
        </script>
      </body>
    </html>

Upvotes: 2

Views: 1880

Answers (1)

geocodezip
geocodezip

Reputation: 161334

There are no "circles" in KML. You need to generate a circular polygon with the correct radius. I implemented a version on this page:

example

If you click on "Generate KML" you will get this KML:

<?xml version="1.0" encoding="UTF-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Placemark>
      <name><![CDATA[]]></name>
      <description><![CDATA[]]></description>
      <Polygon>
        <extrude>1</extrude>
        <altitudeMode>relativeToGround</altitudeMode>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates>
              75.97323066160926,20.34462694382967,0
              75.96496457627045,20.5023906507352,0
              75.94024592717449,20.658635006900816,0
              75.89931276842476,20.81185529376479,0
              75.8425593087164,20.96057591620589,0
              75.77053211489097,21.10336461333105,0
              75.68392484819908,21.23884625193071,0
              75.58357158396333,21.36571606976336,0
              75.47043877897697,21.48275224112917,0
              75.34561596399672,21.588827643719412,0
              75.21030525096592,21.68292071342043,0
              75.06580975601942,21.764125282534497,0
              74.91352104976282,21.83165930667011,0
              74.75490575568685,21.884872396256995,0
              74.59149142578141,21.92325208015319,0
              74.42485182937483,21.94642874102231,0
              74.256591796875,21.954179174950532,0
              74.08833176437517,21.94642874102231,0
              73.92169216796859,21.92325208015319,0
              73.75827783806315,21.884872396256995,0
              73.59966254398718,21.83165930667011,0
              73.44737383773058,21.764125282534497,0
              73.30287834278408,21.68292071342043,0
              73.16756762975328,21.588827643719412,0
              73.04274481477303,21.48275224112917,0
              72.92961200978667,21.36571606976336,0
              72.82925874555092,21.23884625193071,0
              72.74265147885903,21.10336461333105,0
              72.6706242850336,20.96057591620589,0
              72.61387082532524,20.81185529376479,0
              72.57293766657551,20.658635006900816,0
              72.54821901747955,20.5023906507352,0
              72.53995293214074,20.34462694382967,0
              72.54821901747955,20.18686323692414,0
              72.57293766657551,20.030618880758524,0
              72.61387082532524,19.87739859389455,0
              72.6706242850336,19.72867797145345,0
              72.74265147885903,19.58588927432829,0
              72.82925874555092,19.45040763572863,0
              72.92961200978667,19.323537817895982,0
              73.04274481477302,19.20650164653017,0
              73.16756762975328,19.10042624393993,0
              73.30287834278408,19.00633317423891,0
              73.44737383773058,18.925128605124844,0
              73.59966254398718,18.85759458098923,0
              73.75827783806315,18.804381491402346,0
              73.92169216796859,18.76600180750615,0
              74.08833176437517,18.74282514663703,0
              74.256591796875,18.73507471270881,0
              74.42485182937483,18.74282514663703,0
              74.59149142578141,18.76600180750615,0
              74.75490575568685,18.804381491402346,0
              74.91352104976282,18.85759458098923,0
              75.06580975601942,18.925128605124844,0
              75.21030525096592,19.00633317423891,0
              75.34561596399672,19.10042624393993,0
              75.47043877897697,19.20650164653017,0
              75.58357158396333,19.323537817895982,0
              75.68392484819908,19.45040763572863,0
              75.77053211489097,19.58588927432829,0
              75.8425593087164,19.72867797145345,0
              75.89931276842476,19.87739859389455,0
              75.94024592717449,20.030618880758524,0
              75.96496457627045,20.18686323692414,0
              75.97323066160926,20.34462694382967,0
            </coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>
    </Placemark>
  </Document>
</kml>

That KML displayed on a Google Maps Javascript API v3 map

The code that generates the circle is:

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();

Upvotes: 3

Related Questions