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=" 中央区銀座4丁目 " 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
© Copyright 2025 ExpyDoc