【パブリッシャー】Googleマップにデータを表示してみる

[Sharperlight](https://sharperlight.jp/)には地図との連携機能が組み込まれています。クエリで抽出された座標情報をGoogleマップに表示できます。 Google My Mapsで提供されるものを含む幅広い表示タイプ (マーカー、ラインなど)を表示することができます。
更には、ラベル、タイトル、説明、詳細フィルター、onclickアクションなどの情報や機能を追加することもできます。

今回は、Basicな使い方をしてみようと思います。
そうですね。。。東京の山手線の主要な駅にマーカーを表示してみましょうか。

その前に大事な事。
<INS>Google Cloud Platformでプロジェクトを作成し、Maps JavaScript APIを有効にしてAPIキーを作成しておく必要があります。</INS>
### クエリの作成 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**パブリッシャー**を起動します。
`新規`ボタンで新しいWebレポート(公開クエリともいう)の作成を開始します。
**コード**、**グループ**および**タイトル**を記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9c80622d-9e22-1b4b-30d3-3c929c832ac7.png)
`クエリーを編集`ボタンでクエリの設計に移ります。お馴染みの**クエリビルダ**が起動します。
データベースに地図座標をもつデータがある場合は、そのデータベースに対してデータモデルを作成しSharperlightを接続することも可能ですが、ここではカスタムデータセットを定義して簡単に説明していこうと思います。
ということで、`製品`には**システム**、`テーブル`には**カスタム定義のデータセット**を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f956aa77-09b9-4b6d-64aa-04afc0bf3e8a.png)
準備するデータはこのようなものを準備します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ffb7dbe7-a40c-4f9b-5ca5-a52d661dd74f.png)
```
"Type","Position","Title","Label","Colour"
"Marker","{lat: 35.681384550223896, lng: 139.7671174976865}","東京駅","TS","red"
"Marker","{lat: 35.72965955077921, lng: 139.71088936935854}","池袋駅","IS","yellow"
"Marker","{lat: 35.68984458631095, lng: 139.70061210561343}","新宿駅","SJS","yellow"
"Marker","{lat: 35.658216943171034, lng: 139.70170017121214}","渋谷駅","SBS","yellow"
```
`Type`（必須）のMarkerとはこのような記号です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2d2be616-5feb-010d-ee08-2e3e06c61b8d.png)
Typeにはこの他にLineやRectangleなども指定できます。それらTypeによって必要とする座標の数も変化します。
`Position`（必須）はその名のとおり地図座標です。**lat**はlatitudeで緯度、**lng**はlongitudeで経度を表します。
`Title`（必須）はツールチップです。
`Label`（必須）は記号と共に地図上に表示されます。
`Colour`ではMarkerの色を指定します。

`出力`アイテムはこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0a727209-6691-bd03-3144-099e89d4a6ae.png)
これでクエリは完成！`OK`ボタンで保存します。
### マップへの出力設定 ###
Webレポートのダイアログに戻ったら`グラフ`タブに移動します。今回はGoogle Mapsに関するプロパティだけを設定し、その他のプロパティは初期値のままとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/97471d2a-31c1-aea8-c5d2-c780c7391938.png)
お手持ちのAPIキーを`APIキー`プロパティに貼り付けます。
`ズーム`プロパティは、地図が表示される時点でどれほどのズームで表示するかを数値で指定します。
`中央`プロパティは、表示される地図の中央をどこにするかを地図座標で指定します。今回は東京駅の座標を中央プロパティに設定します。
以上で作成は終了。`適用`ボタンで保存します。
### ブラウザでの検証 ###
Sharperlightサービスが起動していることを確認して、`ビュー`ボタンで表示します。
このような地図が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d761a2cf-f67e-3c76-c72a-b4877d4a5ca2.png)
### おまけ ###
上野駅、品川駅、秋葉原駅、日暮里駅も追加してみます。また新宿駅から秋葉原駅にLineをオレンジ色で描いてみます。
`Label`も日本語にしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/30b09229-9552-1f73-31d1-0802cad59521.png)
```
"Type" , "Position" , "Title" , "Label" , "Colour", "Style"
"Marker" , "{lat: 35.681384550223896, lng: 139.7671174976865}"  , "JR東日本　東京駅です"  , "東京駅"  , "red"  , ""
"Marker" , "{lat: 35.72965955077921, lng: 139.71088936935854}"  , "JR東日本　池袋駅です"  , "池袋駅"  , "yellow" , ""
"Marker" , "{lat: 35.68984458631095, lng: 139.70061210561343}"  , "JR東日本　新宿駅です"  , "新宿駅"  , "yellow" , ""
"Marker" , "{lat: 35.658216943171034, lng: 139.70170017121214}" , "JR東日本　渋谷駅です"  , "渋谷駅"  , "yellow" , ""
"Marker" , "{lat: 35.71424993509081, lng: 139.7774164931519}"  , "JR東日本　上野駅です"  , "上野駅"  , "yellow" , ""
"Marker" , "{lat: 35.62870076172282, lng: 139.73876614844696}"  , "JR東日本　品川駅です"  , "品川駅"  , "yellow" , ""
"Marker" , "{lat: 35.72835436176079, lng: 139.7706454215451}"  , "JR東日本　日暮里駅です"  , "日暮里駅"  , "yellow" , ""
"Marker" , "{lat: 35.69859250044313, lng: 139.7730678444849}"  , "JR東日本　秋葉原駅です"  , "秋葉原駅"  , "yellow" , ""
"Line"   , "{lat: 35.68984458631095, lng: 139.70061210561343},{lat: 35.69859250044313, lng: 139.7730678444849}","","","orange","strokeWeight:4"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c27c7520-8d7a-502a-317f-95fb6e78b685.png)

以上簡単な使用方法を試してみました。
では、失礼します。