地図(Google)

■ コントロール外観

■ 説明

Google Mapを描画するコントロールです。
CSVファイルから座標やリンクなどを読み込むことで地図上にマーカーを置くことや、CSVファイルから座標や色などを読み込み地図上に線を描画することができます。

Google Mapを利用するためには、APIキーの取得が必要です。APIキーの取得方法については、Google Mapのガイドページを参照ください。

■ イベント

このコントロールで使用できるイベントの一覧です。

イベント名	値	説明
!onClickMarker	integer index, string title,string value	マーカーがクリックされた場合に発生するイベントです。 変数リンクに設定された変数に対し、マーカーに設定された値を出力します。

■ プロパティ

このコントロールで使用できるプロパティの一覧です。

各コントロール共通のプロパティについては、共通項目ページをご参照ください。

プロパティ名	デフォルト値	説明
File		マーカー表示の入力として扱うCSVファイルを設定します。
TriggerRefresh	0	値が変更されるとFileプロパティのCSVファイルを再読み込みします。
FileLine		地図上の線の描画の入力として扱うCSVファイルを設定します。
TriggerLineRefresh	0	値が変更されるとFileLineプロパティのCSVファイルを再読み込みします。
linePointX		マーカーから線を引く時に使用するX座標です。画面上端を0としてpx単位で数値を指定します。
linePointY		マーカーから線を引く時に使用するY座標です。画面左端を0としてpx単位で数値を指定します
lineVisible	true	マーカーから指定座標に引いた線の表示非表示を設定します。

■ Fileプロパティに入力するCSVファイルのデータ形式

CSVファイルのデータは、以下のように設定してください。また文字コードはutf-8を使用してください。

行の初めに#を使用するとコメント行として扱います。

・1列目には、マーカーの緯度を設定してください。

・2列目には、マーカーの経度を設定してください。

・3列目には、マーカーのタイトルを設定してください。このタイトルはマウスをマーカーに合わせることで表示されます。

・4列目には、マーカーをクリックした時に遷移するURLを設定してください。

この列の値を、「page_id:任意のページID/layer_id:任意のレイヤーID」とすることで任意のページのレイヤーを設定することができます。

・5列目には、マーカーとして地図上に表示する画像のURLを設定してください。画像のURLが間違っている場合は、デフォルトのマーカーが表示されます。

この列の値が「/viewer/setting」から始まる場合は、プロジェクトにアップロードされているファイルを指定することができます。

・6列目には、遷移するURLの開き方を設定してください。「true」か「TRUE」が設定された場合は、ページをそのまま遷移させ、「false」か「FALSE」が設定された場合は、URLを新しいタブとして開きます。それ以外の場合はURLを開きません。

・7列目には、マーカーのラベルを設定してください。ラベルは地図のマーカーの上に表示されます。

・8列目には、マーカーのラベルのサイズを設定してください。サイズは、px単位の指定と「small」・「medium」・「large」などのキーワード指定が使用できます。

・9列目には、マーカーのラベルの色を設定してください。色は、CSSで使用される「red」「blue」などのキーワード指定と「#ff0000」・「#00ff00」などの16進数での指定が使用できます。

・10列目には、マーカーのイベントで出力するユーザデータを設定してください。(value)

・11列目には、マーカーの画像を切り替える変数リンクを設定してください。リンク変数の値がfalseの場合に5列目に設定したマーカーが表示されます、trueの場合に12列目に設定したマーカーが表示されます。

・12列目には、マーカーの画像を切り替えた時に表示する画像のURLを設定してください。画像のURLが間違っている場合は、デフォルトのマーカーが表示されます。

この列の値が「/viewer/setting」から始まる場合は、プロジェクトにアップロードされているファイルを指定することができます。

実際のCSVの例を以下に示します。

35.65858,139.7454,東京タワー,https://www.tokyotower.co.jp/,/viewer/setting/image/tower.png,false,tower,10px,white

35.65858,139.7454,東京タワー,https://www.tokyotower.co.jp/,/viewer/setting/image/tower.png,false,tower,10px,white,テストパラメータ,link,/viewer/setting/image/tower2.png

■ FileLineプロパティに入力するCSVファイルのデータ形式

CSVファイルのデータは、以下のように設定してください。また文字コードはutf-8を使用してください。

行の初めに#を使用するとコメント行として扱います。

・1列目には、線の幅(ピクセル単位)を設定してください。

・2列目には、線の色を設定してください。色は、CSSで使用される「red」「blue」などのキーワード指定と「#ff0000」・「#00ff00」などの16進数での指定が使用できます。

・3列目には、線の種類を選択してください。この値を「Arrows」と設定した場合は線の先端が矢印になります。また値を「Dash」に設定すると線が破線になります。それ以外の値に設定すると実線になります。

・4列目以降の偶数列には、座標の緯度を設定してください。この座標を結んで線を描画するため、座標は2つ以上設定してください。

・5列目以降の奇数列には、座標の経度を設定してください。この座標を結んで線を描画するため、座標は2つ以上設定してください。

実際のCSVの例を以下に示します。

2,#ff0000,Arrows,34.68401215,135.5059125,34.73142753,135.423515,34.66820098,135.1790692,34.6523868,135.0170209,34.79009462,134.6709515,34.51187376,133.9435612

■ 詳細プロパティ

地図の詳細プロパティでは、Google Mapで使用するAPIキーの入力や地図の表示位置の設定を行えます。

□ APIキー

APIキーの入力を行えます。入力したAPIキーは、文字数分の「*」で表示されます。APIキーを複数回設定してしまった場合は、ページを保存して、ページを更新してください。

□ 緯度

開始地点の緯度を入力します。

□ 経度

開始地点の経度を入力します。

□ ズーム

ズームの倍率を設定します。

□ 中心座標を取得

現在の地図の中心座標とズームの値を取得して、緯度・経度・ズームの欄に表示します。

□ 検索バーの表示

検索バーの表示・非表示を設定します。 検索バーを利用するには、GoogleのPlaces APIを有効にする必要があります。

□ TriggerRefreshの動作条件

プロパティのTriggerRefreshの値が増加した場合のみ、CSVを再読み込みするかどうかを設定します。

□ TriggerLineRefreshの動作条件

プロパティのTriggerLineRefreshの値が増加した場合のみ、CSVを再読み込みするかどうかを設定します。

□ ズームレベルに応じて、マーカーサイズを変更する

有効の場合、現在のズームレベルに応じて、マーカー画像のサイズを変更します。

□ 基準ズームレベル

ズームレベルに応じてマーカーサイズを変更する基準となるズームレベルを設定します。

基準ズームレベルを現在のズームレベルより大きくすると、マーカーの画像サイズが小さくなります。基準ズームレベルを現在のズームレベルより小さくすると、マーカーの画像サイズが大きくなります。

□ 座標とズームを適用

入力した緯度・経度・ズームを適用し、地図の表示位置を変更します。

□ APIキーを適用

入力したAPIキーを適用しマップを表示させます。

□　マーカーから座標に対して線を引く

有効の時、プロパティで設定した座標に対して、クリックしたマーカーから線を引きます。

□　線の色

マーカーから引く線の色を設定します。

□　線の幅

マーカーから引く線の幅を設定します。