Extracting Extended Data from KML using Javascript

Question

I have a placemark in a KML that looks something like this

<Placemark> 
 <id>test345</id>
<name>Images from KML file</name>
<ExtendedData>
<Data name="type">
    <value>images</value>
</Data>
</ExtendedData>
<Point>
  <coordinates>-122.448425,37.802907,0</coordinates>
</Point>

I'm attempting to extract the ExtendedData information out of this placemarker on a click event:

google.earth.addEventListener(kmlObject, 'click', function(event) {
    event.preventDefault();
    var kmlPlacemark = event.getTarget();
});

An alternative solution would be to get the kmlObject from the kmlPlacemarker, any ideas?

Answer 1

Given the placemark the Google Earth API provides two methods to access the ExtendedData element.

• getBalloonHtml()
• getBalloonHtmlUnsafe()

API Reference:
https://developers.google.com/earth/documentation/reference/interface_kml_feature

You can find a working example in the Google Code Playground here:
https://code.google.com/apis/ajax/playground/?exp=earth#extended_data_in_balloons

If you wanted to get the raw KML for extended data then you could fetch the KML representation and parse it as an XML document.

var output = placemark.getKml();

Answer 2

Just to say I posted about just this issue on the support forum for the plug-in: https://code.google.com/p/earth-api-samples/issues/detail?id=16

Here is a method I cobbled together to provide support for getExtendedData. It takes a string of Kml as the argument via 'feature.getKml();` It returns any extended data elements that have values in a key[value] object. It expects the extended data to be in the format:

<Data name="Foo">
  <value>bar</value>
</Data>

Tested in XP - FF3.0, IE7, Chrome

function getExtendedData(kmlString) { 
  var xmlDoc = null; 
  var keyValue = []; 
  //Parse the kml 
  try { 
    //Internet Explorer 
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async="false"; 
    xmlDoc.loadXML(kmlString); 
  } catch(e) { 
    try { 
      //Firefox, etc. 
      var parser = new DOMParser(); 
      xmlDoc = parser.parseFromString(kmlString,"text/xml"); 
    } 
    catch(e) { 
      //Failed to parse 
      alert(e.message); 
      return; 
    } 
  } 
  // Get all the named elements 
  var data = xmlDoc.getElementsByTagName("Data"); 
  // Iterate through the data elements 
  for(var i=0; i<data.length; i++) { 
    if(data[i].getAttribute("name") &&
      data[i].getElementsByTagName("value").length > 0) { 
      // Get the name and value 
      var name = data[i].getAttribute("name"); 
      var value = data[i].getElementsByTagName("value")[0].firstChild.data; 
      // Assign them to the keyValue object 
      keyValue[name] = value; 
    } 
  } 
  return keyValue; 
} 

Usage

// where 'feature' is the object with the extended data
var data = getExtendedData(feature.getKml()); 

for (var name in data) { 
  var value = data[name]; 
  alert(name + '=' + value); // e.g. type=images
} 

Answer 3

It is actually possible to access the ExtendedData elements via the DOM APIs, although they're not particularly well-documented anywhere. I found them while grepping around inside some of the resource (.rcc) files packaged with the Plugin.

Assuming a simple Placemark sample similar to yours:

  <Placemark id="testmark">
    <!-- other stuff... -->
    <ExtendedData>
      <Data name="someDataUrl">
        <displayName>URL Representing some Data</displayName>
        <value>http://example.com/#hello</value> 
      </Data>
    </ExtendedData>
  </Placemark>

Then (once it's fetched/parsed/loaded into Earth, you can access it something like:

var mark = ge.getElementById('testmark');
var extDataObj = mark.getExtendedData();
var extDataOut = Array(extDataObj.getDataCount());

for (var i = 0; i < extDataObj.getDataCount(); i++) {
    var item = extDataObj.getData(i);
    var details = { name: item.getName(),
                    displayName: item.getDisplayName(),
                    value: item.getValue() 
                   };
    extDataOut[i] = details;
}
console.dir(extDataOut);

Haven't tested it for performance vs the .getKml() and feed to an external parser approach, and the lack of official documentation might mean it's not fully functional or supported, but in all testing so far it seems to do ok. I haven't yet found a way to access any of the more complicated SchemaData type structures, only the simple <data name=''><value>... form.