Custom HTML google map

I’m trying to use the Custom HTML block to create a google map and looking at the example documentation.
Does the gps coordinates have to come from a time series attribute or could it be a device tag containing a gps field containing the coordinates ?

1 Like

Hi @Lars_Andersson,

I have not done this myself, but I am testing it out currently. I believe the only way to set a GPS tag within the block would be through context, as queries do not currently return tags. I will get back to you shortly with confirmation.

Thanks!
Julia

ok, I’m trying with an gps attribute now, but I can’t get that to show anything, so I’m missing something.

Hi @Lars_Andersson,

I was able to get this working, but noticed some possible frustrations along the way.

It may be worth noting that the example GPS map is written for a gauge query, so if you are using a Data Table or Time Series Query, you will need to modify this line:

var gps = DashboardBlock.input.queries.gps.value.split(',')

This would need to be changed to access an array of values that are returned by those queries. The Gauge Query returns one data point, while the queries other return multiple points. Below is the difference between the JSON structures:

Gauge Query

Time Series Query

Also, be sure to note that you will need to select Maps Javascript API when creating your API Key in Google Maps.

After creating a tag context variable, I was able to map my tag value in the block with the following line:

When I change my context tag value, my map recenters to the new point:

Let me know if I can help further!
Julia

1 Like

Regardless what I do, I see nothing in the preview window, like you show above.
I was using the map API key from your example, so I’m guess that’s one major issue, or should I still see something?

Hi @Lars_Andersson,

Yes, that API key has been revoked, and without a valid key you should not see anything displayed in the block.

Thanks!
Julia