Custom HTML google map

[Lars_Andersson]

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 ?

[JuliaKempf]

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

[Lars_Andersson]

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

[JuliaKempf]

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

[Lars_Andersson]

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?

[JuliaKempf]

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

[Bryan_Chase]

Hi @JuliaKempf.

I’m trying to get the custom HTML block to work. I think I have the google API correct - but is there a way to see if there is some error message on the call? My resulting dashboard map is blank.

Thanks!

[JuliaKempf]

Hi @Bryan_Chase,

There are a couple of ways you can debug this block. I would recommend beginning by opening your Dev Tools in your browser. You can then use a debugger statement or console.log, which will print to the Dev Tools console.

Thanks!
Julia

[Bryan_Chase]

What’s the referring website, from Google’s point of view? I’m trying to restrict access and need to enter something like "app.losant.com/dashboards." Is that the true web location which is requesting the Google Maps API?

[Bryan_Chase]

@JuliaKempf Sorry I’m having a lot of trouble just to get a map to show up given the example code https://docs.losant.com/dashboards/custom-html/. My window is always blank.

• I have entered my Google API into the “src=…” line near the body bottom.

• I put the debugger statement in, in several places (do I need it in every or just the first one?)

• From the Google side, I have disabled all restrictions on the API (which I’d rather not do, but at least to try to see something…). I used to see the error "Google Maps Javascript API Error “RefererNotAllowedMapError” but now it’s gone.

• I use the Maps Javascript API from another app (a custom python app) and it shows me map tiles from Google, so I think I’m doing that correctly.

• I have a workflow sending GPS-type data to other dashboards which show GPS Heatmap and GPS historical data on maps, so I think I’m doing that right.

• In the HTML or CSS, do I need to explicitly refer to my GPS variables?

But why is my Custom HTML Map Block always blank?

[JuliaKempf]

Hi @Bryan_Chase,

I am looking at this currently and am attempting to replicate the issue. I will respond shortly with more information, please let me know if you have any further questions in the meantime.

Thanks!
Julia

[JuliaKempf]

Hi @Bryan_Chase,

I was able to locate a couple of things that would be causing a bit of a headache, and you asked about one of them! Yes, you are correct, there are two lines in the code you will need to change for your GPS value to be read from the query.

Currently, your query is named gauge-0. Because there is a hyphen in the name, you will have to format the reference a bit differently than the current configuration. Currently, the section of body code that needs to be edited is written as:

 function initMap() {
    var drawChart = function() {
      if (!DashboardBlock.input.queries.gps) {
        return
      }
      var gps = DashboardBlock.input.queries.gps.value.split(',')

This will need to be modified to:

 function initMap() {
    var drawChart = function() {
      if (!DashboardBlock.input.queries['gauge-0']) {
        return
      }
      var gps = DashboardBlock.input.queries['gauge-0'].value.split(',')

Please let me know if I can explain any further, or if this does not resolve the issue. I’m happy to help

Thanks so much,
Julia

[Bryan_Chase]

Great. If you can make something which even just shows a map where I can put in a canned lat/lon and see a map, that may go a long way. Something like this:

Replace this line like this (is this the correct way, with quotes and whatnot???):

///var latLng = { lat: parseInt(gps[0]), lng: parseInt(gps[1]) }

var latLng = { lat: “37.386913”, lng: “-121.995595” }

Now I’m sometimes getting from the debugger: “initMap is not a function”

Thanks!

-Bryan

[JuliaKempf]

Hi @Bryan_Chase,

Happy to walk through it, and I’ll also invite you to a dashboard where you can view this in action.

Currently, you have a device with a GPS attribute. My device will be named GPS Device, and it has a GPS attribute as well. Within my Custom HTML block, I configure a gauge query for my GPS Device:

As long as a value was reported for the gps attribute in the last 15 minutes, my map should populate when I am finished configuring the block.

Now, I move on to configuring the Head content. This is the same as the example head code found in the documentation, and nothing needs to be changed here. You can just copy and paste!

Now, as a quick pro tip. Whenever you create a new Custom HTML Block, the block will automatically display the structure of the DashboardBlock object. So, if I create a new block, I can see the structure of my query object:

So, looking at this structure, I can see how the object is shaped, and can more easily reference the value I want. I want to get the gauge-0 object below queries, but because gauge-0 contains a hyphen, I cannot reference it as I normally would an object (DashboardBlock.input.queries.gauge-0), and it must be restructured to DashboardBlock.input.queries['gauge-0']. This bracket format within Javascript will allow for correct iteration over the hyphen.

So! Going back to the documentation, I copy the example body code and paste it into my block. I set the Google API key, but nothing happens.

And that is because of these two highlighted grey lines of code:

These two lines are references to the DashboardBlock object shown above. Keep in mind, this is where the gauge-0 object is that returns my GPS values. The documentation uses an example query name of gps, while mine is gauge-0. I reformat this code like so:

These are the only things I need to change! Once I press update, I can see my map has finally rendered:

And now I have a nice custom Google Map!

Please let me know if I can answer any further questions or explain anything further

Thanks,
Julia

[Bryan_Chase]

Hi Julia,

Closer. I see a map now, but it has a dot at a location I don’t expect. Is there some rounding/concatenation going on? It’s very far from the expected location. The dot is at -37.0, -122.0 whereas I expect to see a dot at 37.38457,-122.01238.

Also, I’m getting errors such as "Uncaught DOMException: Blocked a frame with origin “null” and also an ERR_INVALID_URL.

See the SS:

[Bryan_Chase]

Julia,

I figured out the concatenation part. The function parseFloat needs to be used instead of parseInt.

I’m still getting the errors shown by the browser debugger but the dot’s in the right place.

Now I want to loop through all the dots in the time-series-0 datastructure. That seems like a Javascript task which I think I can figure out.

[JuliaKempf]

Hi @Bryan_Chase,

I have informed our engineering team of these errors, and they will be looking into them further. These errors should not cause any performance issues or inhibit the functionality of the block, however, please let me know if that changes or if the block is not behaving as intended.

Thanks so much, and please let me know if you have any further questions!
Julia