dynamic content in kml balloon from url - kml

Question

I have a server that is serving up an xhtml page with all of the content I want displayed in my google earth (or worldwind) balloon. I would like the placemark balloon to fetch the html page when it is clicked on the map. To make it simple, I want my balloon to be www.yahoo.com when you click it from the map.
Any searching online sends me to java code that can hook into the google earth api. I am really hoping there is a client side kml way to do this. Is there an extended data tag or description tag I can use to get this to work? I have even tried to use the embed tag which works great for a you tube video but there is no plugin for an html page. Any help is much appreciated.
This works too but an iframe is pretty ugly -
<Placemark>
<name>Test Placemark</name>
<description>
<![CDATA[
<iframe src="http://www.yahoo.com" frameborder="0"
scrolling="auto" height="500" width="600"></iframe>
]]>
</description>
...

Answer 1

you could try the getBalloonHtmlUnsafe() and the HtmlDivBalloon? https://developers.google.com/earth/documentation/balloons#getballoonhtmlunsafe
However you are adding the kml to the page you could then bind a click function to those placemarks.
google.earth.fetchKml(ge, url, function(kmlObject){
if(kmlObject){
ge.getFeatures().appendChild(kmlObject);
if(kmlObject.getType() === 'KmlPlacemark'){
google.earth.addEventListener(kmlObject, 'click', function(event){
event.preventDefault();
var balloon = ge.createHtmlDivBalloon('');
var content = kmlObject.getBalloonHtmlUnsafe();
balloon.setFeature(kmlObject);
var div = document.createElement('div');
div.innerHTML = content;
balloon.setContentDiv(div);
ge.setBalloon(balloon);
});
}
}
});
If that still doesn't work, remember that google earth scrubs a lot of balloon data so you might try using jquery to inject the html.
var balloon = ge.createHtmlDivBalloon('');
var content = kmlObject.getBalloonHtmlUnsafe();
balloon.setFeature(kmlObject);
var div = document.createElement('div');
balloon.setContentDiv(div);
ge.setBalloon(balloon);
$(div).html(content);