マップビュー（Google Maps）

最終更新日: 2020年3月14日
R8 | R9

ご利用の前に

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の部分にある場合は、ジャスミンソフトの実装部分で吸収可能かどうか判断した上で、サポートの範囲内で対応します。
  • 2018年6月より、APIキーが必須となりました。詳細は同社の「パートナーディレクトリ」で "Regions" に "Japan" を選択して表示されるパートナー企業様へお問い合わせください。

APIキーの設定

Google Maps APIを利用する場合、APIキーが必要になります。

1. API キーの入手

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

Wagbyでは "Maps JavaScript API" と "Geocoding API" の両方を利用します。これらを有効にしてください。

2. API キーの登録

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

図1 APIキーの設定
R8.1.1より前の Wagby をご利用の場合、ライセンス種別を指定する欄があります。こちらは「標準」を選んでください。(2018年6月より実施された、GoogleMaps利用ルール改訂のため。)

例

マップビュー機能を有効にした「店舗」モデルを用意した例を示します。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 マップビューの名称項目を一覧表示画面でも用いる

注意

緯度と経度が登録されていないデータは、地図上にマーカは表示されません。

検索画面を開いたときの地図表示の範囲を指定する

標準では地図表示の範囲は"全世界"です。緯度経度項目の初期値「検索画面表示時」と「検索画面表示時（範囲検索の上限項目）」を設定すると、範囲を限定することができます。ズームレベルもあわせて設定することができます。

半径、MBR、重ね画像

半径

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

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

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

図9 半径の入力

MBR (minimum bounding rectangle; 最小外接矩形)

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

MBRの値は緯度経度で、"(x1,y1)-(x2,y2)" という書式になります。手入力も可能です。項目「MBR」にセットされます。

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

図10 MBRの表示

重ね画像

MBR を利用しつつ、さらに項目「重ね画像」で画像ファイルを示す URL が指定されている場合は、矩形内にその画像を表示します。マーカに紐付けて任意の画像を表示させることができます。「MBR」ボタン下のスライダで画像の透過率を変更できます。

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

図11 重ね画像の表示

マーカーの色と画像を指定する

色の指定

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

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

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

図13 マーカーの色を変更した

ワンポイント

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

画像を利用する

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

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

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

図15 サンプルのアイコン

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

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

定義方法

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

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

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

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

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

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

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

図21 マーカー画像URL項目

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

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

一覧表示画面への対応

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

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

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

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

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

図25 隠し項目とする

画像のダウンロード

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

スタイルを指定する

Google Maps のスタイルを指定することができます。道路などの地物のスタイルを JSON オブジェクトの配列として定義できます。

図26 スタイルの設定(1)

全ての地物をを灰色とし、幹線道路の形状を青色、風景ラベルを非表示とするスタイルの例は次のとおりです。 

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]
図27 スタイルの設定(2)

このスタイル指定を組み込んだときの表示イメージは次のとおりです。

図28 スタイルの設定(3)

参考資料