3. gmap4jsf のタグ詳解

3. gmap4jsf のタグ詳解
gmap4jsf には次のようなタグが用意されています。あまり多くはありませんので覚えるのは難しくな
いと思います。これから、それぞれのタグの使い方について解説していきます。
▼ gmap4jsf のタグ
タグ
機能
備考
map
地図を表示する
marker
地図上に目印 ( マーク）をつける
map コンポーネントの子要素になる
地図上に吹き出しでコメントをつける
map、 marker コンポーネントの子要素になる
mapControl
ズーム、上下左右に移動する
map コンポーネントの子要素になる
groundoverlay
地図上に画像などを重ねる
map コンポーネントの子要素になる
polygon
地図上に多角形を描く
map コンポーネントの子要素になる
polyline
地図上に折れ線を描く
map コンポーネントの子要素になる
point
地点（緯度経度）
map コンポーネントの子要素になる
streetViewPanorama
ストリートビューを表示する
地図にイベントリスナーを設定する。イイベントソースになる GMaps4JSF コンポーネント
eventListener
ベントの種類と実行する関数を指定す
の子要素になる
る。
icon 目印（marker）に使う画像を設定する。marker コンポーネントの子要素になる
3.1. map タグ
map タグは地図を表示する最も基本となるタグです。このタグを親タグとしていくつかのタグを子供
として内包することができます。たとえば、map タグの中に目印を表示する marker タグを置くことがで
きます。
3.1.1 タグの説明
map タグは次のような属性を持っています。
▼ map タグ
コンポーネントの属性
必須か否か
説明
id
－
コンポーネントの ID
rendered
－
表示非表示を boolean で指定
binding
－
バッキングビーンの中のインスタンスへマッピングす
デフォルト値
なし
TRUE
なし
るための EL 表現
longitude
－
マップで表示したい地点の経度
30.01
latitude
－
マップで表示したい地点の緯度
31.14
address
－
マップで表示したい地点の住所。これを使用する場
なし
合には logitude や latitude は使用できない。
(GClientGeocoder)
locationNotFoundErrorMessag
－
e
表示する住所が存在しなかった場合に表示するエ
ラーメッセージ。
service not found
the address
location
width
－
地図の幅
500
height
－
地図の高さ
500
zoom
－
地図のズーム値。 1 から 22
11
地図のタイプ。次のうちのいずれかの値
type
－
(G_NORMAL_MAP、 G_SATELLITE_MAP、
G_HYBRID_MAP
G_HYBRID_MAP).
地図を window load 時に表示するかどうかのフラ
renderOnWindowLoad
－
グ。普通は TRUE であるが、地図をある領域の内
TRUE
側に表示し Ajax で更新する場合には FALSE にす
る。
enableDragging
－
地図をドラッグして動かすようにできるフラグ。 true
TRUE
でドラッグ可能。
このフラグを true にセットすると
addStreetOverlay
－
streetViewPanorama component をダイレクトに
FALSE
使用できるようになる。
これは地図を参照する JavaScript 変数を用
jsVariable
－
意したい場合に使用する。それによって地図を
なし
JavaScript でカスタマイズするコードを書くことがで
きる。
これらの属性を使って、map タグのいくつかの使い方をご紹介します。
3.1.2 緯度経度を指定したマップ
地図を表示する最もシンプルな方法は緯度、経度を指定した map タグを使うことです。普段我々が使
わない緯度経度を使うのはプログラムの立場からみて処理しやすいからです。人間ならどの市や町を見
たいかというところから地図を開きますが、プログラムではそういった言葉で表現した地点よりも数値
で表現した地点のほうがよりダイレクトなのです。
そのためプログラムを作る時には表示する地点の緯度と経度を知る必要があります。これはどのよう
にすればいいでしょう。実は Google には http://www.geocoding.jp というサイトが用意されています。
たとえば東京都庁の緯度と経度を調べてみましょう。次のように地図とともに数値が表示されます。よ
く緯度、経度の表現方法として時 : 分 : 秒という 60 進法が使われますが、Google Map では 35.689507
などと 10 進法で小数点以下 6 桁の数値を使います。後で説明しますが、住所だけでもマップを表示す
る方法も用意されています。
10
▲ Geocoding
このように緯度経度がわかったところで、map タグを使って東京都庁のあたりの地図を表示してみま
しょう。map タグは次のように幅と高さを指定します。次に、latitude に経度、longitude に緯度を指
定します。これだけでマップが表示できます。
<m:map width="500px" height="500px" latitude="35.689509"
longitude="139.691677" />
▪simpleMap.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m" %>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple map</title>
<script src="http://maps.google.com/
maps?file=api&v=2&key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK-
tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<f:view>
<h:form id="form">
<m:map width="500px" height="500px" latitude="35.689509"
longitude="139.691677" />
</h:form>
</f:view>
</body>
</html>
11
最初の script タグの中の key= に続く文字列はあなたが取得した API キーを入れてください。あなた
の PC で実行する場合には、サンプルの API キーで可能です。
body タグのところの onunload=”GUnload()”としているのは、Internet Explorer でのメモリーリー
クを防止するためらしいです。Google のサイトでは次のように解説されています。「Google Maps API
では関数クロージャの使用を推奨しています。API イベントハンドルシステムの GEvent による DOM ノー
ドへのイベントアタッチ方法では、Internet Explorer などの一部のブラウザで、高い確率でメモリ
リークが発生してしまいます。Maps API のバージョン 2 で導入された新しいメソッドの GUnload() に
よって、これらのメモリリークの原因となる循環参照のほとんどが解消できます。作成したページの
onunload イベントで次のように GUnload() を呼び出して、アプリケーションでメモリリークが発生す
る可能性を低減させてください。この機能を使用すると、Google マップでの Internet Explorer のメモ
リリークをほぼ回避できますが、メモリ消費の問題が見受けられる場合は Drip などのツールを使用し
て各自のサイトでメモリリークが発生していないか調べてください。」
それでは、Eclipse を使って実行してみます。JSF を実行するには、ご存知だと思いますが、Tomcat
が起動していなければなりません。起動していなければ Tomcat のメニューに出ているネコのアイコン
か Tomcat メニューから起動します。
▲ Eclipse から Tomcat を起動
JSF ファイルは JSP ファイルの一種なので Eclipse では保存するだけで、あとはブラウザーから JSP ファ
イルにアクセスすれば Tomcat が JSP をコンパイルして実行してくれます。JSP ファイルを変更したとき
にはソースコードを再度保存し、ブラウザーでも再読み
込みを行ってください。
実行するにはブラウザーを起動して URL 欄に
http://localhost:8080/gmap/simpleMap.jsf と入力し
ます。拡張子は jsp でなく jsf とします。注意してく
ださい。これは Tomcat の WEB-INF/web.xml にそう設
定されているからです。結果は右のように表示されま
す。本書ではブラウザーとして Google の Chrome を使
用しています。コードで指定したとおり新宿の東京都
庁が地図の中心のようですが、どうも縮尺が適切では
ないようです。zoom 属性を指定しなかったのでデフォ
ルトの 11 で表示されているのです。次のセクション
でズーム設定を行います。
▲シンプルな地図で東京都庁　12
3.1.3 ズーム
通常の Google マップには次のようなズームのスライドレバーが付いていて、目盛りは 22 までありま
す。gmap4jsf の map タグの zoom 属性は、この 22 段階を意味しています。デフォルトの 11 という値は
ちょうど中間の値です。アメリカならまだしも、人口が密集している東京では 11 というのは適切でな
いかもしれません。また、地図の表示サイズ、表示する目的にもよります。日本のどのあたりに東京都
庁というのはあるのか知りたい外国人ならかなり広い範囲を表示しないと意味がないかもしれません
し、最寄の駅からの道順を知りたい人は新宿駅が一緒に入ると良いでしょう。どのくらいが適切なのか
は Google マップで実際に地図を見ながらセンスを養うしかなさそうです。
東京都庁を 500 ピクセル各で表示する場合には、15 くらいがよさそうだということがわかりましたの
で、次のようにしてみます。
<m:map width="500px" height="500px" latitude="35.689509"
longitude="139.691677" zoom="15"/>
この変更したコードは simpleMapZoom.jsp としました。実行した結果は次のとおりで、新宿駅も画面
内に入って都庁がどのあたりにあるのかわかるようになりました。
▲ズームの目盛り　▲ zoom=15 で表示した場合
3.1.4 マップの種類
マップの種類には「地図」
、
「航空写真」、「両方重ねたもの」の 3 つがあります。これらの種類を指定
するのは map タグの type 属性です。
▼ map タグの type 属性
Type の値
マップの種類
G_NORMAL_MAP
地図
G_SATELLITE_MAP
航空写真
G_HYBRID_MAP（デフォルト）
両方重ねたもの
13
まず、普通の地図を表示してみます。次のように type 属性を指定します。
▪mapNormal.jsf
・・・
<m:map type="G_NORMAL_MAP" width="500px" height="500px"
latitude="35.689509" longitude="139.691677" zoom="15"/>
・・・
実行すると次のように表示されます。
▲ type="G_NORMAL_MAP" の場合
次に航空写真を表示してみます。次のように type 属性を指定します。
▪mapNormal.jsf
・・・
<m:map type="G_ SATELLITE _MAP" width="500px" height="500px"
latitude="35.689509" longitude="139.691677" zoom="15"/>
・・・
実行すると次のように表示されます。
14
▲ type=" G_SATELLITE_MAP " の場合
デフォルトの G_HYBRID_MAP は前の例でいくつか使っていますので、省略します。どの種類のマップ
を使うかは用途によって変わってきます。風景や地形を眺めたいなら航空写真です。道順を調べるには
地図のほうが向いています。デフォルトのハイブリッドはちょっと中途半端な感じがしますね。いろい
ろと試してみてください。
3.1.5 住所を指定したマップ
これまで表示するマップの中心地点を指定するのに緯度と経度を使っていました。ほとんどの人は自
分が見たい場所のそういった数値データは知りませんし町の中にも表示はありません。そのため Google
の geocoding というサイトも用意されているわけです。普通の人は「○○県○○市○○町の地図が見た
い」という場合が多いはずです。そのような用途のために map タグには address 属性というものが用意
されていて、そこに住所や場所を示すキーワードを入れれば地図で表示してくれます。Google マップの
ホームページの入力欄に入れる値と同じものを受け取れると思えばよいと思います。address 属性を使
う場合には、longitude と latitude 属性は使えませんので注意してください。
次の例は東京タワーを中心とした地図を表示するものです。
15
▪mapByAddress1.jsf
・・・
<m:map type="G_NORMAL_MAP" address=" 東京タワー " zoom="15"/>
・・・
▲東京タワー
今度はキーワードではなく、住所のようなものを入れてみます。「銀座 4 丁目」と指定してみました。
「銀座四丁目」と指定すると場所が見つからないというメッセージが出ます。表示された地図にある交
差点の名前「銀座四丁目」というのはデータ的には登録されてなくて、登録されているのは「銀座 4 丁目」
なのでしょう。表示できるものとできないものがあるので少し注意が必要です。
▪mapByAddress2.jsf
・・・
<m:map type="G_NORMAL_MAP" address=" 中央区銀座４丁目 " zoom="18"/>
・・・
16
▲銀座 4 丁目
3.1.6 ドラッグできないマップ
Google マップの優れている点は地図をドラッグして上下左右に移動できることです。これはデフォ
ルトで可能になっています。もし、それを禁止したい場合には、次のように map タグの enableDragging
属性を "false" に設定します。
▪mapByAddress1.jsf
・・・
<m:map type="G_NORMAL_MAP" address=" 東京タワー " zoom="15"
enableDragging="false" />
・・・
17

Download Report