Use JavaScript inside balloons in the Google Earth client

Question

I've found a resource suggesting there is a method do this, however the referenced links are throwing google code errors. Does anyone have any examples of using javascript in balloons?

I have a few examples that I have made:

<Placemark>
    <name>Object</name>
    <description><![CDATA[<br><br><br>
        <input value="Test" onchange="this.value=this.value.toUpperCase()">
    ]]></description>
<gx:balloonVisibility>1</gx:balloonVisibility>
    <Polygon>
        <extrude>1</extrude>
        <tessellate>1</tessellate>
        <outerBoundaryIs>
            <LinearRing>
                <coordinates>
                    -1.278059,53.020596,0 -1.278079,53.02062700000001,0 -1.278115,53.02065200000001,0 -1.278164,53.020667,0 -1.278219,53.02067,0 -1.278272,53.020662,0 -1.278316,53.020642,0 -1.278345,53.02061400000001,0 -1.278356,53.020582,0 -1.278346,53.020549,0 -1.278318,53.020521,0 -1.278274,53.020501,0 -1.278222,53.020491,0 -1.278167,53.020494,0 -1.278118,53.020508,0 -1.27808,53.020533,0 -1.27806,53.020563,0 -1.278059,53.020596,0 
                </coordinates>
            </LinearRing>
        </outerBoundaryIs>
    </Polygon>
</Placemark>

However none of the examples I have been able to make are very complex. And I can't figure out how to 'explore' it either... As there are no developer tools...

Answer 1

I have found some information here: JavaScript In KML Ignored By Google Earth Plugin

Code:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
  <Folder>
    <name>South Florida Folder</name>
    <open>1</open>
    <Document>
      <name>Miami Document</name>
      <Style id="miami_style">
        <IconStyle>
          <Icon>
            <href>http://i.imgur.com/CNrRU.gif</href>
          </Icon>
        </IconStyle>
        <BalloonStyle>
          <text><![CDATA[<font face="Arial">$[description]</font>]]></text>
        </BalloonStyle>
      </Style>
      <Folder>
        <name>Miami Folder</name>
        <open>1</open>
        <Placemark id="Miami">
          <name>Miami Placemark</name>
          <description><![CDATA[
            <script type="text/javascript">
              function hideImage() {
                var image = document.getElementById("image");
                image.style.opacity = 0;
                image.style.MozOpacity = 0;
                image.style.KhtmlOpacity = 0;
                image.filter = "alpha(opacity=0)";
              }
            </script>
            <button id='clicker' onclick='hideImage();'>Click Me</button>
            <img id="image" src="http://i.imgur.com/4rhT7.png">
          ]]>
          </description>
          <styleUrl>#miami_style</styleUrl>
          <Point>
            <coordinates>-80.22643611111111,25.788952777777777,0</coordinates>
          </Point>
        </Placemark>
      </Folder>
    </Document>
  </Folder>
</kml>

Ultimately it is bog standard HTML. There are limitations though.

• alert() doesn't work - all messages have to be written to elements.
• VBS and Other scripting languages don't work. (Because it's not an IE control)
• It's very limited in scope - it doesn't see / interact with neighboring placemarks.
• Unable to get window object
• Can't appear to create objectURLs