地図(Google)
■ コントロール外観

■ 説明
Google Mapを描画するコントロールです。
CSVファイルから座標やリンクなどを読み込むことで地図上にマーカーを置くことや、CSVファイルから座標や色などを読み込み地図上に線を描画することができます。
Google Mapを利用するためには、APIキーの取得が必要です。APIキーの取得方法については、Google Mapのガイドページを参照ください。
(注) Internet Explorer 11 のサポートを終了しました。
■ イベント
このコントロールで使用できるイベントの一覧です。
イベント名 | 値 | 説明 |
---|---|---|
!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キーを適用しマップを表示させます。
□ マーカーから座標に対して線を引く
有効の時、プロパティで設定した座標に対して、クリックしたマーカーから線を引きます。
□ 線の色
マーカーから引く線の色を設定します。
□ 線の幅
マーカーから引く線の幅を設定します。
■ 用途例
このコントロールの用途例として以下の例を説明します。
・拠点のマーカー表示と他ページへの画面遷移
この用途例では、地図部品とCSVファイルを用いて、地図上の拠点の位置にマーカーを設置し、マーカーをクリックすることで、拠点情報のページを新しいタブで開くことができます。
手順は7個あり、以下のようになっています。
手順1.地図部品を配置するページとマーカーを押したときに遷移するページを作成する。
手順2.マーカーを押したときに遷移するページに、表示したい内容を作成し、もう一方のページに地図部品を配置する。

手順3.地図部品の詳細プロパティにあるAPIキーのテキストエリアにAPIキーを入力し、APIキーを適用ボタンを押す。この時、APIキーを間違って適用した場合は、正しい値をAPIキーのテキストエリアに入力しAPIキーを適用のボタンを押した後、ページを保存し、ページをリロードしてください。

手順4.以下のようなCSVファイルを作成します。

手順5.作成したCSVをアップロードします。

手順6.地図部品のFileプロパティからアップロードしたCSVファイルを選択する。

手順7.表示されるマーカーをクリックする。
このように行うことで、地図上の拠点の位置にマーカーを設置し、マーカーをクリックすることで、拠点情報のページを新しいタブで開くことができます。
