Say it with Balloons

In Google Earth, KML objects, such as geometry (Point-Placemarks, Lines, Polygons, Models and MultiGeometry), images (GroundOverlay, ScreenOverlay, PhotoOverlay) or containers (Document, Folder), can have a description balloon associated with them. This balloon appears when the object to clicked-on in the 3D browser or the Sidebar. The contents of these balloons are defined by HTML and can be used to access external,, allowing them to be become a portal for greater explanation of the dataset being visualized in Google Earth. (No video available)

 

WebKit Browser

The contents of KML balloons are now rendered by WebKit open source browser engine. Thus the HTML is rendered (mostly) the same as in any WebKit browser, e.g., Google Chrome.

Supported:

  • CSS
  • iFrames, e.g., Can embed Google Docs slide
  • Flash, e.g., Can embed YouTube videos
  • Most JavaScript

Not Supported:

  • Cookies

Basic HTML

The following HTML can be used in <description> and is a useful starting point for those putting simple information in KML balloons.


Bold = <b>Bold</b>

Italics = <i>Italics</i>

Underline = <u>Underline</u>

Line break = <br>


Link to webpage =
<a href="http://earth.images.alaska.edu"> Link to Webpage</a>


Adding an image =
<img src="http://earth.images.alaska.edu/seminar/images/header.png">


Note: If adding HTML directly to the KML using a text browser, remember to use CDATA within <description>:

e.g. <![CDATA[This is <b>Bold</b>]]>

 

Removing To/From Directions

The directions link at the bottom of balloons is automatically disabled for lines, polygons and geometry, but will appear by default for balloons associated with Point Placemarks. To remove it for a given KML object requires editing of the asssociated <BalloonStyle> (using a text editor).


<Style>
  <BalloonStyle>
    <bgColor>ffffffff</bgColor>
    <textColor>ff000000</textColor>
    <text>...</text>
    <displayMode>default</displayMode>
  </BalloonStyle>
</Style>


To add entities to <text> use $[description], $[name]. If formating using HTML, use CDATA to avoid parsing errors.

<bgColor> defines the color and opacity of the balloon.

<textColor> defines the color and opacity of the text in the balloon.

<displayMode> defines if the information in text used to create a balloon (default) or if no balloon is created (hide).


References