How to embed Google Code into Google Earth Balloons

Question

I'm trying to embed Google Code, specifically the Motion Chart Time Format into a Google Earth balloon: https://code.google.com/apis/ajax/playground/?type=visualization#motion_chart_time_formats

Any ideas? I copy paste the code into the placemark description window and didn't load.

Manuel "Manny" Fiol

Any way to make this question more specific? – Jan 04 '13 at 17:55 — , Jan 04 '13 at 17:55

CodeMonkey · Answer 1 · 2013-03-16T21:43:01.697

You have to embed the HTML in a CDATA block in the description then it works.

Note: Also you should add a snippet element to your KML with a short description so the full HTML isn't rendered in the places panel.

The working example would look like this:

<?xml version="1.0" encoding="UTF-8"?>
<kml>
 <Placemark>
  <snippet>Click to see embedded chart</snippet>

  <description>
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['motionchart']});

    function drawVisualization() {

      var time = [['2000W01', '2000W02'],
                  ['2002Q3', '2002Q4'],
                  [1990, 1991],
                  [(new Date(2000, 0, 1)), (new Date(2000, 0, 2))]];

    // ... rest of HTML/javascript truncated
    // full HTML found here:
    // https://code.google.com/apis/ajax/playground/?type=visualization#motion_chart_time_formats

    <div id="visualization" style="width: 800px; height: 400px;"></div>
  </body>
</html>
]]>
    </description>

    <Point>
            <coordinates>-122.087461,37.422069</coordinates>
    </Point>
  </Placemark>
</kml>

Details about the description element in KML including restrictions can be found here. https://developers.google.com/kml/documentation/kmlreference#description

How to embed Google Code into Google Earth Balloons

1 Answers1