>> Visual Web Pack のほかのドキュメント

AJAX マップビューアコンポーネントの使用

目次 -  Google マップの API キーの取得 -  AJAX Web アプリケーションの作成 -  入力コンポーネントの追加 -  マップマーカーの追加 -  マップマーカーフラグの追加 -  AJAX マップビューアコンポーネントで可能なその他の操作

このチュートリアルでは、次のテクノロジとリソースを使用します。

JavaServer Faces コンポーネント / Java EE プラットフォーム	Java EE 5* の場合、1.2 J2EE 1.4 の場合、1.1
Travel データベース	任意
BluePrints AJAX コンポーネントライブラリ	必須

* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。

このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

Google マップの API キーの取得

1. Web ブラウザで、http://www.google.com/apis/maps/ に移動します。

   Google マップキーのサインアップページが Web ブラウザで開きます。

2. 「Sign up for a Google Maps API key」をクリックします。

   Web ブラウザで Google マップキーのライセンス契約書のページが開きます。

3. 契約書を確認し、同意してから、Web アプリケーション用の URL を「My web site URL」に入力します。

   アプリケーション用の URL を調べるには、アプリケーションを配備し、サーバー名とポート番号を確認します。たとえば、URL は http://localhost:8080/ になります。

   指定する URL は、アプリケーションの実行に使用するものと正確に一致している必要があります。ローカルアプリケーションサーバーに配備した、Google マップの API を使用するどのアプリケーションにも同じキーを使用することができます。異なるポートを使用するためにサーバーを再構成するか、または異なるサーバーに配備する場合は、Google から別のキーを入手する必要があります。
4. 「Generate API Key」をクリックします。
5. Google が生成したマップキーをコピーし、テキストファイルまたはほかの使いやすい場所に保存します。AJAX マップビューアアプリケーションを構築するときに、マップキーを使用します。

AJAX Web アプリケーションの作成

1. AJAX コンポーネントをダウンロードしてインポートします (まだ行なっていない場合)。

2. Visual Web アプリケーションプロジェクトを「AjaxMapViewer」という名前で作成します。

   AjaxMapViewer の初期ページである Page1 がビジュアルデザイナーに表示されます。

3. 「プロジェクト」ウィンドウで、「AjaxMapViewer」>「コンポーネントライブラリ」ノードを右クリックし、ポップアップメニューから「コンポーネントライブラリを追加」を選択します。「BluePrints AJAX コンポーネント」を選択し、「コンポーネントライブラリを追加」をクリックします。

   IDE は指定されたコンポーネントライブラリをプロジェクトにコピーし、「パレット」にそのコンポーネントおよびサポートする Bean を追加します。

4. 「パレット」で、「BluePrints AJAX Components」ノードを展開していない場合は展開し、「Map Viewer」コンポーネントをドラッグして Page1 の上にドロップします。図 1 に示すようにビジュアルデザイナーでコンポーネントを下げ、次の節で説明するコンポーネント用の空白を作ります。

   次の図のように、地図のイメージが Page1 に表示され、コンポーネントの「mapViewer1」と「mapViewer1_center」が「アウトライン」ウィンドウに表示されます。

   図 1:「Map Viewer」コンポーネント (表示を拡大)

5. 次の図に示されるように、「プロパティー」ウィンドウで、「Map Viewer」の「key」プロパティーに前述の節で保存した Google マップキーを設定します。

   図 2:マップキーのプロパティー

6. ここまでの確認をするために、メインツールバーの緑色の矢印 をクリックするか、「実行」>「主プロジェクトを実行」を選択して、アプリケーションを構築および実行します。

   次の図に示すように、Web ブラウザで AjaxMapViewer プロジェクトが開きます。

   図 3:「Map Viewer」アプリケーション - 最初のビュー

   
   

   Web ページで地図が表示されない場合は、次の内容を確認します。

   • インターネットに接続していること。
   • ファイアウォールを使用している場合は、プロキシホストおよびポートが正しく設定されていること。
   • アプリケーションサーバーのログにエラーがないこと。「実行時」ウィンドウで、サーバーのノードを右クリックして、「サーバーログを表示」を選択します。

入力コンポーネントの追加

「mapViewer1_center」コンポーネントの「latitude」プロパティーおよび「longitude」プロパティーで、地図の場所を決定します。この節では、ページに入力コンポーネントを追加して、ユーザーの入力した住所を取得し、「BluePrints AJAX Support Beans」の「Geocoding Service Object」コンポーネントを使用して、緯度と経度の座標に変換するページを作成します。要求 Bean に「latitude」プロパティーおよび「longitude」プロパティーを追加し、これらのプロパティーを「mapViewer1_center」コンポーネントの座標を設定するのに使用します。

次の図に、入力コンポーネントを追加したあとの AjaxMapViewer プロジェクトを示します。

図 4:入力コンポーネント付きの「Map Viewer」

1. 「パレット」の「基本」セクションから「ラベル」コンポーネントをドラッグし、ページの最上位にドロップします。コンポーネントのテキストを「Map an Address」に設定します。「プロパティー」ウィンドウの「外観」セクションで、「labelLevel」プロパティーを「強(1)」に設定します。
2. 最初のラベルコンポーネントの下に、さらにラベルコンポーネントを 2 つドロップします。最初のラベルのテキストを「Enter the Street Address:」にして、2 番目のテキストを「Enter the City:」にします。
3. 「テキストフィールド」コンポーネントを、「Street Address Label」コンポーネントの右にドロップします。
4. パレットの「BluePrints AJAX Components」セクションから、「Select Value Text Field」コンポーネントをドラッグし、「City label」コンポーネントの横にドロップします。「プロパティー」ウィンドウで、「Select Value」テキストフィールドの「required」プロパティーを「True」に設定します。
5. 「ボタン」コンポーネントを「ラベル」コンポーネントの下にドロップします。ボタンの「text」プロパティーを「Get Map」に設定し、「id」プロパティーを「getMap」に設定します。
6. 「メッセージグループ」コンポーネントを「Map Viewer」の下にドロップします。このコンポーネントは入力エラーを表示します。

1. 「パレット」の「BluePrints AJAX Support Beans」セクションで、「Geocoding Service Object」コンポーネントをドラッグし、ビジュアルデザイナーの任意の場所にドロップします。

   次の図に示すように、「アウトライン」ウィンドウに「geoCoder1」コンポーネントが表示されます。

   図 5:「アウトライン」ウィンドウ内の「geoCoder1」

2. ファイアウォールを使用していない場合は、手順 3 に進んでください。ファイアウォールを使用している場合は、geoCoder1 が IDE からプロキシ設定情報を取り出さないので、geoCoder1 にプロキシを設定する必要があります。ファイアウォールを使用していない場合は、この手順を実施する必要はありません。

   1. geoCoder1の「プロパティー」ウィンドウで、「proxyHost」プロパティーに適切なホストを設定します。
   2. 「proxyPort」プロパティーに適切なポートを設定します。

3. 「アウトライン」ウィンドウで「RequestBean1」を右クリックして、ポップアップメニューから「追加」>「プロパティー」を選択します。

   メニューに「追加」が表示されない場合、または使用不可になっている場合は、Esc キーを押して再度「RequestBean1」を右クリックします。
4. ｢新規プロパティーパターン｣ダイアログで、｢名前｣フィールドに｢longitude」、｢型｣フィールドに小文字で「double」と入力して、「了解」をクリックします。
5. 2 番目の要求 Bean のプロパティーを作成します。名前フィールドに「latitude」と入力し、「型」に「double」と小文字で入力して、「了解」をクリックします。

6. 「Java」ボタンをクリックして Page1.jsp の Java エディタを開きます。「public class Page1 extends AbstractPageBean」宣言を探します。「Managed Component Definition」コード折り畳みの下に、次の太字の行を追加します。

   コード例 1:Boolean 型の displayMap の追加

   public class Page1 extends AbstractPageBean { // Managed Component Definition private boolean displayMap = false;

   
   

   この演算子は、ユーザーがマップする住所を入力するまで、配備されたアプリケーションに地図を表示するのを防ぎます。

7. ビジュアルデザイナーに戻り、「Get Map」ボタンをダブルクリックします。

   Java エディタでページ1 の getMap_action() メソッドが開きます。

8. getMap_action() メソッドに次のコードを追加します。

   コード例 2:「getMap 」ボタンのコード

   public String getMap_action() { String address = (String)(textField1.getText() + " " + this.selectValue1.getValue()); GeoPoint points[] = geoCoder1.geoCode(address); if (points.length < 1) { error("Sorry, cannot find that location; please be more specific."); return null; } getRequestBean1().setLatitude(points[0].getLatitude()); getRequestBean1().setLongitude(points[0].getLongitude()); displayMap = true; return null; }

9. GeoPoint が検出できないエラーを解決するには、Java エディタ内を右クリックし、ポップアップメニューから「インポートを修正」を選択します。

1. 「アウトライン」ウィンドウを開きます。「RequestBean1」を右クリックし、ポップアップメニューから「追加」>「プロパティー」を選択します。｢新規プロパティーパターン｣ダイアログで、｢名前｣フィールドに｢geoPoints」、｢型｣フィールドに「HashMap」と入力して、「了解」をクリックします。
2. 「アウトライン」ウィンドウで「RequestBean1」ノードをダブルクリックし、RequestBean1.java ファイルを開きます。 HashMap が検出できないエラーを解決するには、Java エディタ内を右クリックし、ポップアップメニューから「インポートを修正」を選択します。
3. HashMap 宣言の private HashMap geoPoints; を次のコードに置き換えます。

   private HashMap geoPoints = new HashMap();

4. ビジュアルデザイナーに戻り、「Select Value」テキストフィールドコンポーネントをダブルクリックします。Java エディタで、selectValue1_matchValue() メソッドのコードを次のコードに置き換えます。

   コード例 3:selectValue1_matchValue() メソッド

   public SelectItem[] selectValue1_matchValue(FacesContext context, String value) { GeoPoint points[] = null; try { points = getGeoCoder1().geoCode(value); } catch (Exception e) { error("Geo Coding Failed. Your internet connection/proxy may be down."); } if ((points == null) || (points.length < 1)) { return null; } else { HashMap geoPoints = getRequestBean1().getGeoPoints(); geoPoints.clear(); SelectItem[] results = new SelectItem[points.length]; for (int i = 0; i < points.length; ++ i){ geoPoints.put(points[i].toString(), points[i]); results[i] = new SelectItem(points[i].toString(), points[i].toString()); } return results; } }

5. HashMap と SelectItem が検出できないエラーを解決するには、Java エディタ内を右クリックし、ポップアップメニューから「インポートを修正」を選択します。

6. prerender() メソッドまでスクロールし、次のコードを追加します。

   コード例 4:prerender メソッド

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   このコードは、通りの住所によって認識された緯度と経度が決定された場合に、「Map Viewer」コンポーネントを描画します。

7. アプリケーションを構築し、実行します。Web ブラウザで、AjaxMapViewer が開きます。「15 Network Circle, Menlo Park, CA」のような実際の住所を入力します。

   テキストフィールドにテキストを入力し始めたときに、「Select Value」テキストフィールドのドロップダウンリストに、可能性のある都市が入ることに注目してください。選択肢が現れたら、リストから Menlo Park, CA を選択できます。

8. 住所をすべて入力したら、「Get Map」ボタンをクリックします。

   次の図に示すように、入力した住所の場所を示す地図が Web ブラウザで開きます。「Select Value」テキストフィールドだけが必要です。

   通りの住所を入力せずに都市を選択した場合、都市全体の地図が表示されます。

   図 6:マップビューアアプリケーション:指定した座標が中心に位置する地図

マップマーカーの追加

1. Page1 のデザインビューを開きます。
2. 「パレット」の「BluePrints AJAX Support Beans」セクションで、「Map Marker」コンポーネントをドラッグし、Page1 の任意の場所にドロップします。

3. 次の図に示すように、「アウトライン」ウィンドウで「Page1」>「mapMarker1」ノードを選択します。

   図 7:「アウトライン」ウィンドウ - 「mapMarker1」ノード

4. mapMaker1 の「プロパティー」ウィンドウで、「markup」プロパティーを「ここです !」に設定します。

   改行無しスペース ( ) は、テキストに割り当てられた表示領域の制限によって複数の行に分割されるのを防ぎます。
5. デザインビューで、マップビューアコンポーネントを右クリックし、ポップアップメニューから「プロパティーのバインド」を選択します。

6. 次の図に示すように、「プロパティーのバインド」ダイアログで、mapViewer1 の「info」プロパティーを Page1 の「mapMarker1」プロパティーにバインドします。「適用」をクリックしてから「閉じる」をクリックします。

   図 8:mapViewer1 の「info」プロパティーを「mapMarker1」にバインド

7. 「Java」ボタンをクリックして Java エディタを開きます。

8. prerender() メソッドにスクロールし、次の太字のコード 2 行を追加します。

   コード例 5:マップマーカーの設定を持つ prerender() メソッド

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   このコードは、コンポーネントが地図の中心の場所を示すように「mapMarker1」コンポーネントの座標を設定します。

9. アプリケーションを構築し、実行します。Web ブラウザで AjaxMapViewer アプリケーションが開いたら、「15 Network Circle, Menlo Park, CA」のような住所を入力します。完全な住所を入力したら、「Get Map」ボタンをクリックします。次の図に示すように、Web ブラウザで、その場所を示すマップマーカーのついた地図が開きます。

   図 9:マップビューアアプリケーション:マップマーカーがある地図

マップマーカーフラグの追加

1. Page1 の Java エディタで、「public class Page1 extends AbstractPageBean」宣言を検索します。このクラスに、次の太字のコードを追加します。

   コード例 6:Page1 に MapMarker 配列を追加

   public class Page1 extends AbstractPageBean { //Managed Component Definition private boolean displayMap = false; private MapMarker[] markers; public MapMarker[] getMarkers(){ return markers; }

2. prerender() メソッドにスクロールし、次の太字のコード 2 行を追加します。

   コード例 7:マップマーカーフラグコードを持つ prerender() メソッド

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); markers = new MapMarker[1]; markers[0] = mapMarker1; mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

3. 「デザイン」ボタンをクリックして Page1 のデザインビューに戻ります。
4. マップビューアコンポーネントを右クリックし、ポップアップメニューから「プロパティーのバインド」を選択します。

5. 次の図に示すように、「プロパティーのバインド」ダイアログで、mapViewer1 の「markers」プロパティーを Page1 の「markers」配列にバインドします。「適用」をクリックしてから「閉じる」をクリックします。

   図 10:「Markers」プロパティーを「Markers」配列にバインド

6. アプリケーションを構築し、実行します。住所を入力し、「Get Map」ボタンをクリックします。次の図に示すように、Web ブラウザで、その場所を示すマップマーカーとフラグの付いた地図が開きます。

   図 11:マップビューアアプリケーション:マップマーカーおよびフラグの付いた地図

AJAX マップビューアコンポーネントで可能なその他の操作

試してみましょう。 「マップマーカーフラグの追加」セクションで、マップマーカーとマーカーフラグを含む MapMarker 配列を追加しました。配列を使用して、地図に複数のマーカーを配置してみましょう。

試してみましょう。 このチュートリアルでは、ページスコープに MapMarker 配列を格納する方法を説明しました。セッションスコープに MapMarker 配列を格納し、地図にマーカーを追加するページを実装してみましょう。提供する追加の住所が、使用しているスケール係数で地図上に表示されることを確認してください。デフォルトのスケール係数は 4 です。

試してみましょう。 このチュートリアルでは、1 つの Java BluePrints AJAX マップコンポーネントを使用してカスタムマップを 1 つ作成する方法を説明しました。1 つ以上のマップを作成するアプリケーションを構築してみましょう。使用する個々のマップコンポーネントのプロパティーに Google マップサービスの API キーを格納せず、web.xml ファイルにコンテキストの初期化パラメータを com.sun.j2ee.blueprints.ui.mapviewer.KEY という名前で作成し、そこに Google マップサービスの API キーを格納します。

試してみましょう。Google マップ JavaScript API については、「Google Maps API Concepts」を参照してください。パンとズームのコントロールを組み込むなどのカスタムマップコントロールを作成する機能については、「Custom Map Controls」というタイトルの節を参照してください。

関連項目:

• AJAX およびその他のコンポーネントのダウンロードとインポート
• AJAX 進捗バーコンポーネント