JavaScript In KML Ignored By Google Earth Plugin

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

Answer 2

I have a similar problem, and have been looking around for a solution. I have found this answer, which I have yet to try myself, but it may be useful to you:

http://markmail.org/message/ivlw7jv3u5nxwkde

I hope so - do share any success you have!

Answer 3

A simple JavaScript code (even simple jQuery) can be inputted into or and it will work. However in the Google Earth environment only. After depreciation of the Google Earth API we cannot really use the JS in .kml file outside the Google Earth. Read more about it here: http://www.mkrgeo-blog.com/content-management-in-kml-files/