The link that follows is the output of what we describe in this blog. Please make sure you have Google Earth plugin installed in your browser.


 <a href="http://demo.kahimyang.info/cgi-cpp/earth.html" target="_blank" class="news_link" title="Earth demo">http://demo.kahimyang.info/cgi-cpp/earth.html</a>. 


Right click on the page and then "View page source" to get the source.



Before all else, make sure to load Google API using your API key. Include the following script before the actual Google Earth script. Replace YOUR_API_KEY with 

your actual key.


<pre class="brush: js">
 &lt;script src="http://www.google.com/jsapi?key=YOUR_API_KEY" 
 type="text/javascript">&lt;/script>
</pre>


<h3>
The init function
</h3>


<pre class="brush: js">
function init() {
 google.earth.createInstance('map3d', initCallback, failureCallback);
}

function initCallback(instance) {
 ge = instance;
 ge.getWindow().setVisibility(true);
 // add a navigation control
 ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

 // add some layers
 ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
 ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

 window.setInterval(progressBar, 100);

 addPlacemark();

 // fetch the KML
 var url = 'KML_URL' ;
 google.earth.fetchKml(ge, url, fetchComplete);

 document.getElementById('plugin-version').innerHTML =
 ge.getPluginVersion().toString();

}

function failureCallback(errorCode) {
 alert ('Load failed, error '+errorCode);
}

</pre>


google.earth.createInstance takes a div element to hold our Google Earth instance, a success and a failure callback functions.



Line number 15 above of our initCallback function, calls our progressBar function which draws the load progress indicator every 100 

milliseconds through setInterval. 


addPlacemark in line 17, adds our point placemark, and the following two lines fetch our extenal KML file. 


Note that we only consume KML from external URL. Please visit the <a href="http://code.google.com/apis/kml/documentation/index.html" target="_blank" 

class="news_link" title="KML">KML file documentation</a> to get familiar with KML language. 
You may also want to use <a href="http://earth-api-samples.googlecode.com/svn/trunk/demos/kmlplayground/index.html" target="_blank" class="news_link" 

title="Google KML Playground">Google KML playground</a> to debug your KML file.



In line 21, we have defined a callback fetchComplete in google.earth.fetchKml, this is called when fetch is complete. fetchComplete takes the 

created KML object as parameter.




Navigation control visibility in line number 9 may take one of the following values

<ul>
<li>VISIBILITY_AUTO</li>
<li>VISIBILITY_SHOW</li>
<li>VISIBILITY_HIDE</li>
</ul>


Line 23 and 24 get the plugin version currently loaded in the browser. 


<h3>
The point placemark ballon and click event
</h3>

<pre class="brush: js">
function addPlacemark() {
 // create the placemark
 var placemark = ge.createPlacemark('');
 var point = ge.createPoint('');
 point.setLatitude(11.033);
 point.setLongitude(125.725);
 placemark.setGeometry(point);

 var icon = ge.createIcon('');
 icon.setHref('MARKER_ICON_URL');
 var style = ge.createStyle('');
 style.getIconStyle().setIcon(icon);
 placemark.setStyleSelector(style);
 // add the placemark to the earth DOM

 placemark.setName('Somewhere');

 ge.getFeatures().appendChild(placemark);

 // Add ge.createLookAt if desired

 google.earth.addEventListener(placemark, 'click', function(event) {
 // prevent the default balloon from popping up
 event.preventDefault();
 var balloon = ge.createHtmlStringBalloon('');
 balloon.setFeature(event.getTarget());
 balloon.setMaxWidth(300);
 balloon.setContentString(
 'Somewhere out there ');
 ge.setBalloon(balloon);
 });
}
</pre>



The above placemark snippet adds placemark to a LatLong point specified. We also added 'click' event handler as a function expression in line 22. It is in the click function where our HTML ballon is created. 


Alternatively, and if desired, we can fly/rotate the globe to this placement through createLookAt (see further down this page for details about this function).



<h3>
The progress bar
</h3>

<pre class="brush: js">
function progressBar () {
 var sp = ge.getStreamingPercent();
 var pb = document.getElementById('progress-bar');
 if (sp == 100) {
 // streaming complete, hide the progress bar
 pb.style.backgroundColor = '#0a0';
 pb.style.width = '950px';
 pb.innerHTML='&nbsp;';

 } else {
 var W = 950 * sp / 100;
 if (W > 200) {
 pb.innerHTML=' Please wait loading ...&nbsp;&nbsp;('+sp+'% complete)';
 }
 pb.style.backgroundColor = '#00f';
 pb.style.width = W + 'px';
 }
}
</pre>



Our progress bar is based on a div with width of 950 pixels. We placed our progress bar at the bottom of the map.


<h3>
KML fetch complete function
</h3>


<pre class="brush: js">
function fetchComplete(object) {
 if (!object) {
 setTimeout(function() {
 alert('Bad or null KML.');
 }, 0);
 return;
 }

 ge.getFeatures().appendChild(object);

 var la = ge.createLookAt('');

 la.set(11.033,125.725, 
 0, // Altitude
 ge.ALTITUDE_RELATIVE_TO_GROUND, // Altitude mode
 0, // Heading
 0, // Tilt
 3600000); // Zoom range

 ge.getView().setAbstractView(la);

}
</pre>



The complete function adds the KML object to map. This is also where we rotate the globe beginning at line 11. This is assuming that the KML object do not rotate the globe or flyToView (Please see KML documentation).



Available altitude mode options are below:

<ul>
<li>ALTITUDE_RELATIVE_TO_GROUND</li>
<li>ALTITUDE_CLAMP_TO_GROUND</li>
<li>ALTITUDE_ABSOLUTE</li>
<li>ALTITUDE_CLAMP_TO_SEA_FLOOR</li>
<li>ALTITUDE_RELATIVE_TO_SEA_FLOOR</li>
</ul>
	

The above the zoom (or reverse) range is at 3600000 meters, looking directly above (0 degree tilt) and with 0 degress heading which is pointing north.


<h3>
Informational overlay options
</h3>


Here are some of the available overlay options. We use the same google.earth instance ge from our preceeding code to demonstrate how to access these options. 



<table rules="all" cellpadding="10" style="font-size:11px;">
<tr>
<td>
ge.getOptions().setScaleLegendVisibility(boolean) 
boolean var = ge.getOptions().getScaleLegendVisibility()
</td>
<td>
Displays the current scale of the map.
</td>

</tr>

<tr>
<td>
ge.getOptions().setUnitsFeetMiles(boolean)
</td>
<td>
Sets the unit the scale of the map. It is either feet or meters.
</td>

</tr>

<tr>
<td>
ge.getOptions().setStatusBarVisibility(boolean)
</td>
<td>
Displays a status bar at the bottom of the Earth window, containing geographic coordinates and altitude of the terrain below the current cursor position, as well as the range from which the user is viewing the Earth.
</td>
</tr>
<tr>
<td>
ge.getOptions().setOverviewMapVisibility(boolean)
</td>
<td>
Displays an inset map of the entire world in the bottom right corner. The current viewport is displayed on the inset map as a red rectangle.
</td>
</tr>

<tr>
<td>
ge.getOptions().setGridVisibility(boolean)
</td>
<td>
Displays the lines of latitude and longitude on the globe.
</td>

</tr>

<tr>
<td>
ge.getOptions().setAtmosphereVisibility(boolean)
</td>
<td>
Displays scattered light in the Earth's atmosphere.
</td>
</tr>
</table>


<h3>
The HTML code
</h3>


<pre class="brush: xml">
&lt;body onload="init()" style="background-color: white;">
 &lt;div id="map3d" style="width: 950px; height: 500px;" />
 &lt;div id="progress-container">
 &lt;div style="color: white;font-style: italic;font-size: 10px;" 
 id="progress-bar" />
 &lt;/div>
&lt;/body>
</pre>



That's it. Good luck.

Using Google Earth in HTML pages with KML, load progress bar, ballons, placemarkers and events