Custom HTML google map

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 :smile:

Thanks,
Julia