今回は、Tom Mangan氏が開発したTLabelを活用して情報ウィンドウを作ってみることにします。
TLabelのサイト（英語） ： http://gmaps.tommangan.us/tlabel.html
TLabelを利用する手順
- TLabelのサイトの"DOWNLOAD"の項目にある"TLabel.2.05.js"（2006/08/19現在のバージョン）をクリックして、ダウンロードします。
- ダウンロードしたファイル"TLabel.2.05.js"を、サーバーにアップロードします。
- API Keyの行の下に、以下の行を書き加えます。
<script src="（アップロードしたディレクトリ＝フォルダのパス/）tlabel.2.05.js" type="text/javascript"></script>
アップロードしたディレクトリ＝フォルダのパスは、正確に記述してください。もしGoogle Mapを埋め込んだページと同じディレクトリ＝フォルダにファイル"tlabel.2.05.js"を置いたのならば、当然ながらパスは省略できます。
たとえば、以下のような記述を加えることとなります。今、Google Mapを埋め込んだページと同じディレクトリ＝フォルダにファイル"tlabel.2.05.js"を置いたとするならば、
|
となるわけです。赤字の部分は、Googleから割り当てられたAPI Keyです。
TLabelの基本的文法
メソッド
TLabelは、４つのメソッドが用意されています。前の２つはGMap2すなわち地図の変数に適用するメソッドで、後の２つはラベルに適用するメソッドです。すなわち、
| メソッド | 説明 | 例 |
| addTLabel(label) | ラベルを地図に追加する | map.addTLabel(Label) |
| removeTLabel(label) | ラベルを地図から消去する | map.removeTLabel(Label) |
| メソッド | 説明 | 例 |
| setPosition(point) | ラベルのアンカーポイントの緯度経度を設定する。"point"に、GLatLngで緯度経度を指定せよ。 | Label.setPosition(point) |
| setOpacity(percentOpacity) | ラベルのイメージの不透明度を設定する。"percentOpacity"を1～100の値で指定せよ。 | Labl.setOpacity(80) |
プロパティ
TLabelの状態を定義するプロパティは、以下のものが用意されています。すなわち、
| プロパティ | 説明 | 必須・ｵﾌﾟｼｮﾝ |
| id | ラベルを特定するID。各ラベルそれぞれが固有の値でなくてはならない。 | 必須 |
| anchorLatLng | アンカーポイントが置かれる緯度経度を指定。GLatLngで緯度経度を指定せよ。 | 必須 |
| anchorPoint | anchorLatLngで指定した緯度経度がラベルに対して置かれる位置を指定。topLeft, topCenter, topRight, midRight, bottomRight, bottomCenter, bottomLeft, midLeft, centerの9つの値が指定できる。指定しなければ、topLeftとなる。 | オプション |
| content | ラベルのXHTML（HTML）内容文。 | 必須 |
| percentOpacity | ラベルの不透明度を1～100の値で指定する。指定しなければ100となる。 | オプション |
TLabelの使用例
例として、以下のようなスクリプトを書いてみました。赤字の部分がTLabel関係の行です。前回の例を応用して、地図中央のマーカーにマウスオーバーするとTLabelで作ったラベルが現れて、マウスアウトすると消えます。つまり、上のaddTLabel(label)とremoveTLabel(label)ラベルを使っているわけです。
ラベルのプロパティは、以下のように設定しました。すなわち、
- ラベルの内容は、<div style="..."></div>ではさみ込んだスタイルシートで定義。背景色は白（#ffffff）、フォントサイズは1.2em。ただし、注意しなければならないことは、日本語で記入するばあいスタイルシート内に"white-space: nowrap;"を記入しないといけません。そうしないと、縦書きになってしまうようです。
- ラベルのidは、"label01"。
- ラベルの位置は、bottomLeft。
- ラベルの不透明度は、70。
|
というわけで、上のスクリプトの具体例を下に示します。地図中央のマーカーをクリックすると、サテライト写真入りのインフォウィンドウが出てきます。マーカーにマウスオーバーするとポップアップする説明文には、文章に加えて"htcarp.png"という画像（カープのマーク）を用いています。これも、地図のページファイルと同じディレクトリ＝フォルダに置いています。
|