【Publisher】Display data on Google Map

[Sharperlight](https://www.sharperlight.com/) has built-in map integration. You can display the coordinate information extracted by the query on Google Maps. A wide range of display types (markers, lines, etc.) can be displayed, including those provided by Google My Maps.
Additionally, you can add information and features such as labels, titles, descriptions, advanced filters, onclick actions, etc.

This time, I will try to use Basic.
Let's mark some major stations on the Yamanote Line in Tokyo.

Important thing before that.
<INS>You must have created a project on Google Cloud Platform, enabled the Maps JavaScript API, and created an API key. </INS>
### Create a query ###
Launch **Publisher** from the Sharperlight application menu.
The `New` button initiates the creation of a new web report (also known as a published query).
Fill in **Code**, **Group** and **Title**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/114ae67a-7272-f6e8-f7fe-499989d8ea89.png)
Use the `Edit Query` button to move on to query design. The familiar **Query Builder** will launch.
If there is data with map coordinates in the database, it is possible to create a datamodel over the database and connect Sharperlight, but here we will define a custom dataset and briefly explain it.
So, `Product` is **System** and `Table` is **Custom Defined Dataset**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ef93c33b-89ae-ed26-ae10-404081365a4b.png)
Prepare data like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/bb3ea51c-0fb4-5d95-3f22-c33e0840b409.png)
```
"Type" , "Position" , "Title" , "Label" , "Colour", "Style"
"Marker" , "{lat: 35.681384550223896, lng: 139.7671174976865}"  , "JR East Japan.　This is Tokyo Station"  , "Tokyo Station"  , "red"  , ""
"Marker" , "{lat: 35.72965955077921, lng: 139.71088936935854}"  , "JR East Japan.　This is Ikebukuro Station"  , "Ikebukuro Station"  , "yellow" , ""
"Marker" , "{lat: 35.68984458631095, lng: 139.70061210561343}"  , "JR East Japan.　This is Shinjyuku Station"  , "Shinjyuku Station"  , "yellow" , ""
"Marker" , "{lat: 35.658216943171034, lng: 139.70170017121214}" , "JR East Japan.　This is Shibuya Station"  , "Shibuya Station"  , "yellow" , ""
"Marker" , "{lat: 35.71424993509081, lng: 139.7774164931519}"  , "JR East Japan.　This is Ueno Station"  , "Ueno Station"  , "yellow" , ""
"Marker" , "{lat: 35.62870076172282, lng: 139.73876614844696}"  , "JR East Japan.　This is Shinagawa Station"  , "Shinagawa Station"  , "yellow" , ""
"Marker" , "{lat: 35.72835436176079, lng: 139.7706454215451}"  , "JR East Japan.　This is Nippori Station"  , "Nippori Station"  , "yellow" , ""
"Marker" , "{lat: 35.69859250044313, lng: 139.7730678444849}"  , "JR East Japan.　This is Akihabara Station"  , "Akihabara Station"  , "yellow" , ""
"Line"   , "{lat: 35.68984458631095, lng: 139.70061210561343},{lat: 35.69859250044313, lng: 139.7730678444849}","","","orange","strokeWeight:4"
```
The Marker in the `Type` (Required) column is such a symbol.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2d2be616-5feb-010d-ee08-2e3e06c61b8d.png)
You can also specify **Line, Rectangle**, etc. for Type. The number of coordinates required by their Type also changes.
`Position` (required) is, as the name suggests, map coordinates. **lat** is latitude and **lng** is longitude.
`Title` (required) is a tooltip.
`Label` (required) will be displayed on the map along with the symbol.
`Colour` specifies the color of the Marker.
`Style` says the style of Line etc.
`The output` item looks like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/118d8799-35bd-9eca-f996-68c5ee058ae6.png)
The query is now complete! Save with the `OK` button.
### Definition for outputting to map ###
Back in the web report dialog, go to the `Chart` tab. This time, set only the properties related to Google Maps, and leave the other properties at their default values.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/50f6eae1-edd5-132a-468e-1828405f943b.png)
Paste your API key into the `API key` property.
The `Zoom` property is a numeric value that specifies how zoomed the map will be when it is displayed.
The `Center` property specifies where to center the displayed map in map coordinates. This time, set the coordinates of Tokyo Station to the property.
Creation is over. Save with the `Apply` button.
### Validation in browser ###
Make sure the Sharperlight service is running and display it with the `View` button.
A map like this is displayed.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a950122b-738b-fff9-ef29-f295aac5723a.png)
How was it?
Thank you very much for reading.