Google Mapには、タブつきとタブなしのインフォウィンドウが用意されています。たとえばマーカーをクリックしたらインフォウィンドウが飛び出るように作りこめば、まずこれで一種類の情報をユーザーに渡すことができます。
さらにアイコンをカスタマイズして、情報の中身によってアイコンを変える。都合これで二種類の情報になります。しかし、まだ足りないと感じたらどうするべきでしょうか。今回以降、もう一種類情報を追加するために、例えばマウスオーバーしたときに別種の情報ウィンドウを開く方法を検討してみます。
マーカーアイコンを情報ウィンドウに使う
GEvent.addListenerは、クリック・ダブルクリック・マウスオーバー・マウスアウトのイベントを行なったときに、何らかのアクションを行なうように指定できます。クリックしたときのイベントにインフォウィンドウを出す動作を割り当てたならば、マウスオーバー・マウスアウトしたときに別の動作を割り当てる余地が残っているのです。そこで、情報を書き記したアイコン画像を別のマーカーとして用意して、マウスオーバー・マウスアウトしたときに出たり引っ込めたりするように設計することができるでしょう。例として、以下のようなスクリプトを書いてみました。赤字の部分が、新たに追加したマウスオーバー・マウスアウト用のマーカーアイコン画像のための行です。
|
上の例は、変数"LtLng01"で共通に定義した緯度経度に、"marker01"（アイコン変数は"icon1"）と"marker02"（アイコン変数は"icon2"）の二つのマーカーアイコンを用意しています。"marker02"はマウスオーバーしたときにmap.addOverlayを使って地図上に表示して、一方マウスアウトしたときにはmap.removeOverlayを使って地図上から消去します。"icon2"を定義する行でicon2.iconAnchor = の右の数値を変更することによって、変数"LtLng01"で指定した緯度経度からやや左上に置いて見栄えを調整しています。この数値は最適な点を各自で判断して調整すればよいでしょう。
というわけで、上のスクリプトの具体例を下に示します。地図中央のマーカーをクリックすると、サテライト写真入りのインフォウィンドウが出てきます。マーカーにマウスオーバーするとポップアップする説明文は、"htbp.png"という画像を作って地図のページファイルと同じディレクトリ＝フォルダに置いたものです。
|
今回検討したマーカーアイコンで情報ウィンドウを作る方法の利点は、画像ファイルのために自由な書式を設定できることです。字体も思うとおりに表現できるし、透明色指定ができるGIFやPNGのファイルを用いれば、四角形以外の図形のウィンドウも出すことができます。
ただし、最大の欠点は、マーカーごとに一つ一つウィンドウ用のファイルを作らなければならないことです。手間な上に、内容の書き換えができません。そこで、次回ではTLabelという有志の作った拡張機能を利用した、より簡易な情報ウィンドウの埋め込みに挑戦してみたいと思います。