サポート > リポジトリ > 画面機能 > マップビュー(Google Maps)

住所項目を利用して任意のモデルを Google Maps 上に表示させることができます。

Google Maps はいつでも無料で利用できるサービスではありません。必ず以下の内容をご確認ください。

  • Google Maps APIの使用については、Google Map APIの利用規約(Google Maps API Terms of Use)に従って下さい。
  • ジャスミンソフトはGoogle Maps APIそのものの機能、サービスについて保障しません。
  • Google Maps API は定期にバージョンアップされる予定です。Google Maps APIのバージョンアップが行われた場合は、それ以降にリリースされるWagbyで対応します。
  • Google Maps 機能に不具合が発生した場合、ジャスミンソフトは、その原因がジャスミンソフト実装部分かGoogle Maps API部分のどちらにあるかを判断します。原因がジャスミンソフト実装部分にある場合は、サポートの範囲内で対応します。原因がGoogle Maps APIの部分にある場合は、ジャスミンソフトの実装部分で吸収可能かどうか判断した上で、サポートの範囲内で対応します。
  • 2016年6月22日以降、一日25,000回以上のAPI利用は有料化されています。

要約すると「有料の顧客のみがアクセス可能なサイト」「社内から、またはイントラネットでのみアクセス可能なサイト」「企業の配達業務、車両管理、企業資産管理に関連するアプリケーション、またはこれに類似するアプリケーション」「一日25,000回以上、APIを利用するアプリケーション」の場合は、Google Maps API for Business ライセンスの購入が必要になります。詳細は同社の「パートナーディレクトリ」で "Japan" を選択して、ライセンスの購入が必要なケースになるかどうかをご確認ください。

2016年6月22日以降に新規でGoogle Maps APIを利用する場合、APIキーが必要になります。 (以前から利用している方は、影響ない、とのことです。)

1. API キーの入手

Google Maps APIの入手は、「Google Maps API > ウェブ向け」から行ってください。

2. API キーの登録7.9.2

「環境 > アプリケーション」タブに用意された「Google Maps」欄に API キーを設定します。

図1 APIキーの設定

無料版をご利用の場合はライセンス種別は「標準」となります。有料版をご契約の場合は、ランセンス種別を「プレミアム」としてください。

R7.9.2 より前の Wagby をご利用の場合

入手したAPIキーを手動で設定します。 詳細は"R7.9.2より前のWagbyを利用する場合"をお読みください。

マップビュー機能を有効にした「店舗」モデルを用意した例を示します。1つのデータに、1組の緯度、経度情報を保持させることができます。(図2)

図2 詳細画面では地図上にポイントが表示される

一覧表示画面では、データの数だけポイントが地図上に表示されます。(図3)

図3 一覧画面では地図上に複数のポイントが表示される

モデルの定義

店舗モデルの定義を図4に示します。ここに用意した「住所」「緯度」「経度」はマップビュー利用時に必須となる項目です。

図4 店舗モデルの定義

画面定義

「画面 > ビュー > マップビュー」を有効にします。

図5 マップビューの定義

項目設定欄に、モデルの項目を割り当てます。次のルールがあります。

以下の表で「必須」とは、必須入力チェックを行うということではありません。必ず用意してほしい項目という意味です。

設定値 対応する項目の型 説明 必須
名称 文字列 一覧表示画面においてマップビューに表示されたマーカにカーソルを当てると、名称で指定した項目のデータが吹き出しで表示されます。(「名称」の指定がない場合は「住所」に指定した項目のデータが表示されます。) -
住所 文字列 「座標取得」ボタン押下時に Google Maps API を利用して住所から緯度経度を取得します。
緯度 8バイト浮動小数点 この座標情報を元にマップビューにマーカが表示されます。
アップロード更新機能を用いて住所データ等を登録する場合、緯度と経度の項目も埋めておく必要があります。緯度経度情報が未定の場合は空白ではなく「0(ゼロ)」を設定してください。
経度 8バイト浮動小数点 この座標情報を元にマップビューにマーカが表示されます。
ズームレベル 整数 マップの拡大縮小レベルです。0〜20の範囲で指定します。 -
半径 8バイト浮動小数点 マップビューに描画する円の半径です。単位は m です。 -
MBR 文字列 マップビューに配置する画像の座標情報です。 -
重ね画像 URL マップビューに配置する画像のファイルパス(URL)です。 -

その他の設定は次のとおりです。

ページタイトル

ページタイトルを設定します。指定がない場合は、「モデル名_マップビュー」となります。

説明文

マップビュー用に説明文を用意することができます。 画面の説明文とは別にマップビューの表示位置に合わせて、地図の下、または右に表示されます。

マップの種類

「Google Maps」を指定します。

マップの表示位置

マップの表示位置を指定します。「左」または「下」が選択できます。標準では「左」が指定されています。

マップの表示比率

マップの表示位置が「左」の場合に有効です。 空白時は「50%」となります。

マップのサイズ

マップの縦横をピクセルで指定します。単位は省略できます。空白時は縦:360px、横:360pxとなります。

マップビューでは、次のようなルールがあります。

検索項目の指定

「緯度」「経度」「住所」項目は、検索条件を有効にしてください。
「緯度」「経度」は範囲検索を有効にしてください。

一覧表示項目の指定

「緯度」「経度」「住所」項目は、一覧表示画面に加えてください。なお、「緯度」「経度」を隠し項目にすることもできます。

読み込み専用設定を行わない

「緯度」「経度」「住所」項目は読み込み専用の指定行わないようにしてください。

一覧表示画面の振る舞い

「検索条件入力画面と検索結果一覧表示を同一画面にて取り扱う」を指定することはできません。

ウィザードとの併用

マップビューとウィザードを併用する場合、マップビュー欄の設定を行った項目は、ウィザード欄に同じページ番号を指定してください。

重ね画像を指定する場合

「重ね画像」を指定する場合はMBRの指定が必須となります。

MBRを指定する場合

テキストエリアをMBRに指定することはできません。

一覧表示画面では、一覧表示されたデータの緯度経度情報を基にマップビュー上にマーカが表示されます。 マーカにカーソルを合わせると「名称」に指定した項目のデータが吹き出しで表示されます (「名称」の指定がない場合は、「住所」に指定した項目のデータが表示されます。)

マップビュー上のマーカをクリックするとそのデータの詳細表示画面に遷移します。

図6 一覧表示画面

定義方法

マップビューの「名称」に指定した項目は、一覧表示画面でも表示するとします。

図7 マップビューの名称項目を指定する
図8 マップビューの名称項目を一覧表示画面でも用いる
緯度と経度が登録されていないデータは、地図上にマーカは表示されません。

半径

マップビューの「R」ボタンを押下すると、円描画・円表示モードになります。 もう一つのマーカをドラッグ&ドロップすることで、円の半径を変更できます。

円の半径は、項目「半径」にセットされます。項目「半径」は手入力可能です。単位はメートルです。

図9 半径の入力

詳細画面で半径を視認する場合は、同じく「R」ボタンを押下してください。

色の指定

マーカーの色を指定することができます。

図10 マーカーの色を指定する

色は RGB 形式の 16 進数として管理されます。(16進数のため先頭に "#" が付与されます。)

図11 マーカーの色を変更した
16進数表記に代わって「black」「brown」「green」「purple」「yellow」「blue」「gray」「orange」「red」「white」という10種類の文字列を指定することもできます。

画像を利用する

画像はあらかじめ用意してください。ここでは「GoogleMapマーカー画像」モデルを作成し、4つのアイコンを事前に用意しています。

図12 GoogleMapマーカー画像モデル

サンプルのアイコンは次のとおりです。

図13 サンプルのアイコン

マーカー画像アイコンを指定します。

図14 マーカー画像アイコンを指定する (1)
図15 マーカー画像アイコンを指定する (2)
マーカーの色と画像の両方を指定した場合は、画像を優先します。

定義方法

はじめに、マーカーの画像を管理する「GoogleMapマーカー画像モデル」を用意します。選択肢モデルの定義に類似しています。式や初期値などの設定は行っていません。シンプルなモデルです。

図16 GoogleMapマーカー画像モデルの定義
マーカーの色だけを設定させ、画像を指定しない場合は、このモデルの定義は不要です。

GoogleMapを利用するモデルでは、「マーカー色」「マーカー画像アイコン」「マーカー画像URL」の3つの項目を追加します。

図17 色と画像に関する項目を追加する

「マーカー画像アイコン」は、上で用意した「GoogleMapマーカー画像モデル」を参照します。

図18 マーカー画像アイコン項目

「マーカー画像URL」は、参照連動項目とします。

図19 マーカー画像URL項目

マップビュー設定で、「マーカー色」「マーカーアイコンURL」に対応した項目をそれぞれ指定します。「マーカーアイコンURL」は(参照連動項目である)「マーカー画像URL」を指定します。

図20 マップビューの設定
「マーカーアイコンURL」を参照連動項目ではなく、文字列型として定義することもできます。その場合は画像のありかを URL で直接、入力するようにしてください。

一覧表示画面への対応

一覧表示画面にもマーカー色と画像を表示させることができます。

図21 一覧表示画面への適用

「マーカー色」「マーカーアイコンURL」を一覧表示に適用するようにします。

図22 一覧表示項目に含める

さらに、これらの項目を「一覧表示画面の隠し項目」とすることができます。これによって一覧表示の内容を最小限に抑えることができます。

図23 隠し項目とする

画像のダウンロード

ここで紹介した4つの画像をダウンロードできます。ダウンロードしたファイルを Wagby をインストールしたフォルダに展開してください。customize/webapp/img フォルダの中に4つの png ファイルがコピーされます。

2016年6月22日以降に新規でGoogle Maps APIを利用する場合、APIキーが必要になります。 R7.9.1 までの Wagby を利用の場合は、APIキーを入手後、手動で次の対応を行ってください。

1. 下記フォルダにある__mapview.xmlをテキストエディタで開き修正します。(Windows OS のメモ帳は使わないようにしてください。)

wagbyapp/webapps/wagby/WEB-INF/applicationContext/__mapview.xml

修正前:

<bean id="googlemap_key"
      class="java.lang.String">
   <constructor-arg index="0" value="maps.google.com/maps/api/js?sensor=false" />
</bean>

修正後:

<bean id="googlemap_key"
      class="java.lang.String">
   <constructor-arg index="0" value="maps.google.com/maps/api/js?sensor=false&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</bean>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXはGoogleから取得したAPIキーを指定してください。

2. customize/webapp/WEB-INF/applicationContext/フォルダに上記の__mapview.xmlをコピーします。

3. wagbyapp アプリケーションを起動し、動作を確認します。

Wagby Developer Day 2017