CODEWITHSUNDEEP
javascriptgoogle-maps-api-3kmlpolygon
mcmonty
mcmonty

Reputation: 83

Google Maps API V3 Read KML File

I'm using KML Example as a guide to read a KML file containing polygons. The kml file contains

    <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
  <name>Neighborhood Groups</name>
  <description><![CDATA[Content]]></description>
  <Style id="style3">
  </Style>
  <Style id="style9">
  </Style>
  <Style id="style8">
  </Style>
  <Style id="style2">
  </Style>
  <Style id="style4">
  </Style>
  <Style id="style7">
  </Style>
  <Style id="style1">
  </Style>
  <Style id="style5">
  </Style>
  <Style id="style6">
  </Style>
  <Style id="style10">
  </Style>
  <Placemark>
    <name>Neighborhood Group 1</name>
    <styleUrl>#style3</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.087296,35.911472,0.000000
            -84.089699,35.909248,0.000000
            -84.089439,35.903618,0.000000
            -84.085625,35.898994,0.000000
            -84.075836,35.903721,0.000000
            -84.081757,35.912968,0.000000
            -84.083565,35.919537,0.000000
            -84.090385,35.918110,0.000000
            -84.087250,35.911507,0.000000
            -84.090385,35.918110,0.000000
            -84.083473,35.919640,0.000000
            -84.087296,35.911472,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 2</name>
    <styleUrl>#style9</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.089439,35.902992,0.000000
            -84.089569,35.902992,0.000000
            -84.089615,35.902954,0.000000
            -84.093178,35.901428,0.000000
            -84.096741,35.900002,0.000000
            -84.097122,35.898819,0.000000
            -84.098969,35.897324,0.000000
            -84.112183,35.891346,0.000000
            -84.102013,35.885120,0.000000
            -84.089699,35.888771,0.000000
            -84.086739,35.892563,0.000000
            -84.082275,35.894367,0.000000
            -84.080429,35.894543,0.000000
            -84.087059,35.899845,0.000000
            -84.089401,35.903061,0.000000
            -84.089439,35.902992,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 3</name>
    <styleUrl>#style8</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094109,35.910252,0.000000
            -84.094551,35.910252,0.000000
            -84.101067,35.909031,0.000000
            -84.096008,35.904068,0.000000
            -84.105103,35.901699,0.000000
            -84.104927,35.899651,0.000000
            -84.102867,35.895691,0.000000
            -84.097977,35.898022,0.000000
            -84.096992,35.899681,0.000000
            -84.095833,35.900730,0.000000
            -84.093681,35.906811,0.000000
            -84.094109,35.910252,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 4</name>
    <styleUrl>#style2</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.101196,35.908970,0.000000
            -84.101418,35.908901,0.000000
            -84.106911,35.907337,0.000000
            -84.113258,35.904381,0.000000
            -84.116608,35.903618,0.000000
            -84.116348,35.901497,0.000000
            -84.116905,35.899826,0.000000
            -84.116394,35.897915,0.000000
            -84.114418,35.893120,0.000000
            -84.111504,35.890961,0.000000
            -84.103905,35.896385,0.000000
            -84.104889,35.899548,0.000000
            -84.105324,35.900383,0.000000
            -84.100731,35.903755,0.000000
            -84.101196,35.908970,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 5</name>
    <Snippet>sdfgsdfg</Snippet>
    <description><![CDATA[<div dir="ltr">sdfgsdfg</div>]]></description>
    <styleUrl>#style4</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094238,35.941559,0.000000
            -84.096649,35.944000,0.000000
            -84.100082,35.945660,0.000000
            -84.105621,35.945702,0.000000
            -84.111618,35.945660,0.000000
            -84.113251,35.943161,0.000000
            -84.113770,35.939030,0.000000
            -84.109177,35.940590,0.000000
            -84.110039,35.927589,0.000000
            -84.105789,35.925468,0.000000
            -84.094238,35.924358,0.000000
            -84.095360,35.930439,0.000000
            -84.094238,35.941559,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 6</name>
    <styleUrl>#style7</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.102272,35.946110,0.000000
            -84.101959,35.946110,0.000000
            -84.100342,35.945911,0.000000
            -84.096512,35.943981,0.000000
            -84.094070,35.941422,0.000000
            -84.094582,35.938961,0.000000
            -84.144463,35.913799,0.000000
            -84.094490,35.927872,0.000000
            -84.093773,35.924252,0.000000
            -84.090210,35.918522,0.000000
            -84.074852,35.921921,0.000000
            -84.079170,35.936520,0.000000
            -84.080971,35.941551,0.000000
            -84.081749,35.943130,0.000000
            -84.081413,35.945061,0.000000
            -84.082520,35.947472,0.000000
            -84.085609,35.949211,0.000000
            -84.092651,35.953411,0.000000
            -84.100029,35.949070,0.000000
            -84.102272,35.946110,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 7</name>
    <styleUrl>#style1</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.082008,35.944618,0.000000
            -84.081757,35.943512,0.000000
            -84.079140,35.936489,0.000000
            -84.079391,35.934158,0.000000
            -84.076088,35.921650,0.000000
            -84.059013,35.925400,0.000000
            -84.059097,35.928532,0.000000
            -84.062569,35.931278,0.000000
            -84.062920,35.932812,0.000000
            -84.060249,35.937119,0.000000
            -84.059608,35.939690,0.000000
            -84.060768,35.941841,0.000000
            -84.064552,35.943130,0.000000
            -84.074333,35.944691,0.000000
            -84.078712,35.945660,0.000000
            -84.082008,35.944618,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 8</name>
    <styleUrl>#style5</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.079613,35.913628,0.000000
            -84.074722,35.906986,0.000000
            -84.065323,35.911575,0.000000
            -84.063797,35.911873,0.000000
            -84.061096,35.912186,0.000000
            -84.062019,35.922176,0.000000
            -84.065582,35.923531,0.000000
            -84.077080,35.920891,0.000000
            -84.079315,35.914322,0.000000
            -84.079613,35.913628,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 9</name>
    <styleUrl>#style6</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.074425,35.906693,0.000000
            -84.074638,35.906605,0.000000
            -84.077042,35.905910,0.000000
            -84.072319,35.899166,0.000000
            -84.068626,35.894058,0.000000
            -84.067337,35.890911,0.000000
            -84.060234,35.892754,0.000000
            -84.056396,35.894283,0.000000
            -84.052963,35.894909,0.000000
            -84.055069,35.899513,0.000000
            -84.058434,35.899132,0.000000
            -84.060387,35.902954,0.000000
            -84.061722,35.905807,0.000000
            -84.064934,35.910309,0.000000
            -84.065582,35.911331,0.000000
            -84.074425,35.906693,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 17</name>
    <styleUrl>#style10</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.061737,35.913246,0.000000
            -84.061844,35.913002,0.000000
            -84.063606,35.911995,0.000000
            -84.063690,35.910950,0.000000
            -84.064682,35.910221,0.000000
            -84.061028,35.902817,0.000000
            -84.057938,35.898716,0.000000
            -84.052574,35.900906,0.000000
            -84.047256,35.904797,0.000000
            -84.048134,35.905632,0.000000
            -84.047424,35.906815,0.000000
            -84.047966,35.911194,0.000000
            -84.048264,35.912777,0.000000
            -84.050819,35.913334,0.000000
            -84.051201,35.914669,0.000000
            -84.052490,35.918163,0.000000
            -84.052490,35.921429,0.000000
            -84.057083,35.920597,0.000000
            -84.059204,35.918682,0.000000
            -84.061737,35.913246,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
</Document>
</kml>

The javascript which processes it is

function initialize() {
  var myLatlng = new google.maps.LatLng(35.910200,-84.085100);
  var myOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var nyLayer = new google.maps.KmlLayer(
      'map.kml',
      {  suppressInfoWindows: true,
         map: map});


  google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content_window');
    sidediv.innerHTML = text;
  }
}

The total work in progress is at http://cspc.net/neighborhoods/map.html . As you can see, the map won't finish loading. The kml file is being exported from a custom map created in maps.google.com.

Do I need to modify the kml file?

Upvotes: 1

Views: 4911

Answers (1)

Sean Mickey
Sean Mickey

Reputation: 7716

The problem is in the KmlLayerdoc constructor call. You have to supply a publicly accessible URL where Google may retrieve your kml file. Google processes your kml, translates it into overlay tiles, and then returns that as the KmlLayer you created with new google.maps.KmlLayer(...).

Upvotes: 2

Related Questions