KMLでは，更に様々な要素を利用することができます．特に，アイコンをクリックすると表示されるバルーンによる情報表示は一般的なテクニックとなっています．実際にバルーンを表示するためのKMLファイルを書いてみます．
作業を行うにあたり，Google Earthをローカルにインストールしておきます．インストールがまだの場合は，
こちらを参照してインストールしてください．
テキストエディタを利用して，以下のようなKMLファイルを記述します．
| KMLファイルのサンプルコード |
<![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Placemark>
<name>大徳寺！</name>
<description>
<![CDATA[<hr /> <br>
<table width="420 border="0" padding="2">
<tbody><tr>
<td colSpan="2">北大路の紫野にある寺院です．<br>
<a href="http://kyoto.gp1st.com/450/ent9.html#dtj_dasn">
大仙院</a>など庭園の美しい<strong>塔頭</strong>があります．
お茶室が多いお寺です．</td></tr>
<tr>
<td><img src="http://www.hishiyama.com/fieldinfo/pics/temple1.JPG"
alt="temple1" width="205" height="154"></td>
<td><img src="http://www.hishiyama.com/fieldinfo/pics/temple2.JPG"
alt="temple2" width="205" height="154"></td>
</tr>
<tr>
<td>咲いている花1</td>
<td>咲いている花2<br />鮮やかな花も咲いています</td>
</tr>
</tbody></table>]]]]><![CDATA[></description>
<LookAt>
<longitude>135.74569702148438</longitude>
<latitude>35.04414830224615</latitude>
<range>305.8880792294568</range>
<tilt>46.72425699662645</tilt>
<heading>49.06133439171233</heading>
</LookAt>
<visibility>1</visibility>
<Style>
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml
/shapes/open-diamond.png</href>
</Icon>
</IconStyle>
</Style>
<Point>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>135.74569702148438, 35.04414830224615, 0</coordinates>
</Point>
</Placemark>
</kml>
]]>
|
|
上のサンプルコードのファイルは
こちらにあります．
（オフラインの場合は，この章は飛ばして，次に進みます）
上のサンプルコードを，拡張子kml（ファイル名：
～.kml）で保存します．このファイルをFTPでWWWサイトにアップロードします．
Web上にアップロードする場合，MIMEタイプの設定を行います．まだ設定が終わっていない場合は，Webサーバ上に以下を記述した「.htaccessファイル」を置くことにより行ないます．設定の詳細は，
こちらを参照して確認してください．
アップロードが完了したら，当該サイトのURLを指定してアクセスし，KMLファイルをブラウザで開きます．
プレイスマークが表示されたら，そのプレイスマークをクリックするとバルーンが表示されます．
バルーンの中の情報は，サンプルコードの前半に以下のように記述されています．
<name>大徳寺！</name>
<description>
<![CDATA[<hr /> <br>
<table width="420 border="0" padding="2">
<tbody>
<tr>
<td colSpan="2">紫野にある寺院です．
<a href="http://kyoto.gp1st.com/450/ent9.html#dtj_dasn">大仙院</a>など
庭園の美しい<strong>塔頭</strong>があります．</td></tr>
<tr>
<td><img src="http://www.hishiyama.com/fieldinfo/pics/temple1.JPG"
alt="temple1" width="205" height="154"></td>
<td><img src="http://www.hishiyama.com/fieldinfo/pics/temple2.JPG"
alt="temple2" width="205" height="154"></td>
</tr>
<tr>
<td>咲いている花1</td>
<td>咲いている花2<br />鮮やかな花も咲いています</td>
</tr>
</tbody></table>]]>
</description>
CDATAセクションはXML用語です．<![CDATA[ という文字列で始まり，]]>で終わります．CDATAはCaracter Dataを意味しています．KMLはXML言語なので，</description>で囲まれている部分の内側にHTMLによる記述を行った場合にHTMLタグとKMLのタグとの区別がつかない恐れがあります．そこで，HTMLはCDATAセクションの内側に書くことにして，CDATAセクションの内側はKMLのタグ要素ではないことを明示的に表します．これにより，CDATAの内側の要素がKMLの記号とは認識されなくなります．
上のサンプルもCDATAセクションの内側はHTMLで記述されており，テーブル形式でデータを表示するものとなっています．文書中でのリンクや画像の表示，テーブルレイアウトは通常のHTMLの記述です．
<Point>要素の子要素としては，以下のようなものがあります．
<Point>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>135.74569702148438, 35.04414830224615, 0</coordinates>
</Point>
| <extrude> |
高度を設定し，上空に浮かんだアイコンから地表に向かって線を引くかどうかを設定する．デフォルトは0で，線なし．1の場合はアイコンから地表に向かって線が表示される． |
| <altitude>, <altitudeMode> |
<altitude>はメートル単位で高度を指定．これを指定した場合は，<altitudeMode>で高度の設定に関して詳細の設定を行う．設定は以下の3通り．
- clampToGround : <coordinates>の高度設定が無視される．アイコンは常に地表に設置．
- relativeToGround : 標高を0として<coordinates>の高度に設定された数値（メートル）がその地点の標高にプラスされるかたちで設定．アイコンは上空に浮かんだようなイメージで設定される．
- absolute : 海抜を0として<coordinates>の高度に設定された数値（メートル）の高度にアイコンを設定．
|
| <coordinates> |
経度，緯度，高さの順にプレイスマークの位置を指定する．単位はメートル．高度の設定を有効にするためには，<altitudeMode>を必ず設定しなければならない． |