Question

I’ve created a simple KML file that works in the standalone Google Earth client, but won’t work at all in the Google Earth Plugin (regardless of browser):

<?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</name>
        <open>1</open>
        <Document>
            <name>Miami</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</name>
                <open>1</open>
                <Placemark id="Miami">
                    <name>Miami</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>

Basically, I have an image that displays by default, and I want to make it go away when I click the button. Eventually, I want to be able to toggle images by clicking, but I figure this needs to work first in order to get to that step.

This works perfectly fine in standalone Google Earth, but doesn’t work in the Google Earth Plugin.

Oddly, this also works in the Google Earth Plugin if I run it in a JavaScript console after the balloon is already displayed. It just doesn’t acknowledge the code already in the file.

Any ideas?

Answer 1

The Earth API strips out any javascript in a Balloon description for security purposes. A common workaround is to listen for a click event on your placemark (or a balloonopening event more generally) and then recreate an HtmlDivBalloon programmatically with the full content. For more details check out http://code.google.com/apis/earth/documentation/balloons.html#getballoonhtmlunsafe