Balloons are information windows displayed in the Google Earth Plugin, optionally associated with a feature. Their content is specified by the developer, and can include any HTML, CSS, or JavaScript (with the exception of feature balloons). Most aspects of balloons can be controlled through the API:
|
setMinHeight(),
setMaxHeight(), setMinWidth(), setMaxWidth())setBackgroundColor()) *not applicable to feature balloonssetForegroundColor()) *not applicable to feature balloonssetFeature())setCloseButtonEnabled())
Feature balloons are the Google Earth Plugin's basic balloon. They display the content of a feature's description, and appear when the feature is clicked. The plugin removes any of the following from a feature balloon:
<iframe> tags<embed> tags<object> tagsA feature balloon doesn't need to be explicitly created; the addition of a description to a feature will enable the feature balloon.
var placemark = ge.createPlacemark('');
placemark.setName("placemark");
placemark.setDescription('This is a description');
ge.getFeatures().appendChild(placemark);
var point = ge.createPoint('');
point.setLatitude(12.345);
point.setLongitude(54.321);
placemark.setGeometry(point);
To display a feature balloon without having to click the feature
itself, create a feature balloon and call GEPlugin.setBalloon(). A feature
balloon must be attached to a feature.
The following example shows setBalloon() being called in the initialization
callback - the balloon is displayed when the plugin is loaded.
Source: http://code.google.com/apis/earth/documentation/samples/feature_balloon_example.html
var placemark = ge.createPlacemark('');
placemark.setName("placemark");
placemark.setDescription('Lorem ipsum dolor sit amet, <b>consectetur</b> ' +
'adipisicing elit, sed do eiusmod tempor ' +
'incididunt ut labore et dolore magna aliqua.');
ge.getFeatures().appendChild(placemark);
var point = ge.createPoint('');
point.setLatitude(12.345);
point.setLongitude(54.321);
placemark.setGeometry(point);
var b = ge.createFeatureBalloon('');
b.setFeature(placemark);
b.setMinWidth(400);
ge.setBalloon(b);
The example below moves setBalloon() into its own function, so that
it can be called from a button click. Note that placemark must be
defined as a global variable, so that it is available in the showBalloon() function's scope.
Source: http://code.google.com/apis/earth/documentation/samples/feature_balloon_button_example.html
<script type="text/javascript">
var ge;
var placemark;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
// Create the placemark.
placemark = ge.createPlacemark('');
placemark.setDescription(
'<img src="http://www.google.com/intl/en_ALL/images/logo.gif" height="25px" width="75px">' +
'<p><em>Feature balloons</em> accept most HTML.</p>' +
'<table border="1px"><tr><th>Allowed</th><th>Not allowed</th></tr>' +
'<tr><td>Tables</td><td>IFRAMEs</td></tr>' +
'<tr><td>Font styles</td><td><embed> and <object> tags</td></tr>' +
'<tr><td>etc...</td><td> </td></tr></table>' +
'<p>CSS and JavaScript are not supported.</p>');
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude(12.345);
point.setLongitude(54.321);
point.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
// Move the camera
var la = ge.createLookAt('');
la.set(12.345, 54.321, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, -8.541, 66.213, 1000);
ge.getView().setAbstractView(la);
}
function failureCB(errorCode) {
}
function showBalloon() {
var balloon = ge.createFeatureBalloon('');
balloon.setFeature(placemark);
balloon.setMinWidth(400);
ge.setBalloon(balloon);
}
google.setOnLoadCallback(init);
</script>
The showBalloon() function can then be called in any manner from the page:
<input type="button" value="Show balloon" onClick="showBalloon()" />
Or:
<script type="text/javascript">
var node = document.getElementById('some_link');
if (node.addEventListener)
node.addEventListener('click', showBalloon, false);
else if (node.attachEvent)
node.attachEvent('onclick', showBalloon);
</script>
HTML string balloons can contain any HTML or CSS markup, or JavaScript
code. Content
is defined using setContentString() — string balloons do not use
any content present in a feature's description.
HTML string balloons must be explicitly created using createHtmlStringBalloon() and
displayed using setBalloon().
Tip: The default onclick behavior for a feature in Earth is the display of a feature balloon. If you wish to display an HTML string balloon instead, you must override the default behavior. For instructions, refer to Making your HTML balloon appear when a feature is clicked.
HTML string balloons do not need to be attached to a feature. If no feature is specified, the balloon will be displayed in the center of the current view.
Source: http://code.google.com/apis/earth/documentation/samples/html_string_balloon_example.html
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark); // optional
balloon.setContentString(
' <object width="200" height="150"><param name="movie" '
+ 'value="http://www.youtube.com/v/6mrG_bsqC6k&hl=en&fs=1"/>'
+ '<param name="allowFullScreen" value="true"/>'
+ '<embed src="http://www.youtube.com/v/6mrG_bsqC6k&hl=en&fs=1" '
+ 'type="application/x-shockwave-flash" allowfullscreen="true" '
+ 'width="200" height="150"></embed></object>');
ge.setBalloon(balloon);
HTML DIV balloons use a given <div> element as the content to show inside the balloon. The DIV is reparented to the plugin's internal DOM structure. All HTML, CSS markup, and JavaScript code is acceptable in an HTML DIV balloon.
HTML DIV balloons must be explicitly created with createHtmlDivBalloon() and
displayed with setBalloon(). Content must be added to a DIV element
on the page, before being set with setContentDiv().
Tip: The default onclick behavior for a feature in Earth is the display of a feature balloon. If you wish to display an HTML DIV balloon instead, you must override the default behavior. For instructions, refer to Making your HTML balloon appear when a feature is clicked.
A simple DIV balloon can be created as follows:
var balloon = ge.createHtmlDivBalloon('');
balloon.setFeature(placemark);
var div = document.createElement('DIV');
div.innerHTML = 'Any <em>HTML</em>, CSS, or JavaScript goes here.';
balloon.setContentDiv(div);
ge.setBalloon(balloon);
The following example copies the content from a specified element on the page into a new DIV, then displays that content in a balloon. This is the basis for dynamically generated pages, with placemarks displaying when page links are clicked. In the example below, the placemarks are hard-coded, but they could be generated from data in a database or flat file.
Source: http://code.google.com/apis/earth/documentation/samples/html_div_balloon_example.html
Within the initialization callback function (initCB() in our examples):
// Create the placemarks and points.
window.placemark0 = ge.createPlacemark('');
var point0 = ge.createPoint('');
point0.setLatitude(12.342);
point0.setLongitude(54.321);
placemark0.setGeometry(point0);
ge.getFeatures().appendChild(placemark0);
// Add an event listener to each of the 'results' list items.
// If/else statement is a fix for IE behavior.
var divs = document.getElementById('results').getElementsByTagName('li');
for (var i = 0; i < divs.length; i++) {
var singleDiv = divs[i];
if (singleDiv.addEventListener)
singleDiv.addEventListener('click', makeClickHandler(divs[i].id), false);
else if (singleDiv.attachEvent)
singleDiv.attachEvent('onclick', makeClickHandler(divs[i].id));
}
Outside of initCB():
function makeClickHandler(id) {
return function() {
var balloon = ge.createHtmlDivBalloon('');
// Attach this balloon to the placemark.
balloon.setFeature(window['placemark' + id]);
var div = document.createElement('DIV');
// Populate the new div with the appropriate list item from the 'results' div.
div.innerHTML = document.getElementById('results').getElementsByTagName('li')[id].innerHTML;
balloon.setContentDiv(div);
ge.setBalloon(balloon);
}
}
Finally, within the body of the page:
<div id="results">
<p><strong>Show:</strong></p>
<ul>
<li id="0">great swimming</li>
<li id="1">sharks!</li>
<li id="2">sea lions</li>
</ul>
</div>
For any feature with a description, the default onclick behavior
is the display of a feature balloon. If you'd prefer to display an HTML string
or HTML DIV balloon instead, you'll need to override the default behavior and
use setBalloon() instead.
This is accomplished using an event handler.
Source: http://earth-api-samples.googlecode.com/svn/trunk/examples/balloon-youtube.html
google.earth.addEventListener(placemark, 'click', function(event) {
// Prevent the default balloon from popping up.
event.preventDefault();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark);
balloon.setMaxWidth(400);
balloon.setContentString(
' <object width="400" height="300"><param name="movie" '
+ 'value="http://www.youtube.com/v/6mrG_bsqC6k&hl=en&fs=1"/>'
+ '<param name="allowFullScreen" value="true"/>'
+ '<embed src="http://www.youtube.com/v/6mrG_bsqC6k&hl=en&fs=1" '
+ 'type="application/x-shockwave-flash" allowfullscreen="true" '
+ 'width="400" height="300"></embed></object>');
ge.setBalloon(balloon);
});
To close a balloon:
ge.setBalloon(null);