\
**Category:** Help\
**Tags:** dashboard\
**Created:** [November 21, 2019, 6:25pm UTC](https://forums.losant.com/t/custom-html-google-map/2397 "2019-11-21T18:25:46Z")\
**Posts on this page:** 17\
**Page:** 1
**Author:**  [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [November 21, 2019, 6:25pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/1 "2019-11-21T18:25:46Z")
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 ?
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [November 21, 2019, 7:41pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/2 "2019-11-21T19:41:44Z")
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
---
**Author:**  [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [November 21, 2019, 7:52pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/3 "2019-11-21T19:52:35Z")
ok, I’m trying with an gps attribute now, but I can’t get that to show anything, so I’m missing something.
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [November 21, 2019, 10:45pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/5 "2019-11-21T22:45:57Z")
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:
```auto
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
---
**Author:**  [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [November 22, 2019, 5:04pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/7 "2019-11-22T17:04:38Z")
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?
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [November 22, 2019, 5:09pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/9 "2019-11-22T17:09:21Z")
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
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 7, 2020, 5:57pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/11 "2020-02-07T17:57:19Z")
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!
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [February 7, 2020, 7:01pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/13 "2020-02-07T19:01:43Z")
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) or `console.log`, which will print to the Dev Tools console.
Thanks!
Julia
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 7, 2020, 7:28pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/14 "2020-02-07T19:28:12Z")
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."](http://app.losant.com/dashboards.%22) Is that the true web location which is requesting the Google Maps API?
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 7, 2020, 8:02pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/15 "2020-02-07T20:02:06Z")
@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/](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?
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [February 7, 2020, 8:40pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/16 "2020-02-07T20:40:36Z")
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
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [February 7, 2020, 9:24pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/17 "2020-02-07T21:24:35Z")
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](https://stackoverflow.com/questions/7122609/how-do-i-reference-a-javascript-object-property-with-a-hyphen-in-it/7122629) a bit differently than the current configuration. Currently, the section of body code that needs to be edited is written as:
```auto
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:
```auto
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
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 7, 2020, 9:38pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/18 "2020-02-07T21:38:00Z")
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
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [February 7, 2020, 10:42pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/19 "2020-02-07T22:42:54Z")
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](https://docs.losant.com/dashboards/custom-html/#example-google-maps-head-content), 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](https://docs.losant.com/dashboards/custom-html/#example-google-maps-body-content) 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
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 7, 2020, 11:44pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/20 "2020-02-07T23:44:23Z")
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:
---
**Author:**  [@Bryan\_Chase](https://forums.losant.com/u/Bryan_Chase)\
**Post date:** [February 8, 2020, 12:02am UTC](https://forums.losant.com/t/custom-html-google-map/2397/21 "2020-02-08T00:02:38Z")
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.
---
**Author:**  [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [February 10, 2020, 3:53pm UTC](https://forums.losant.com/t/custom-html-google-map/2397/24 "2020-02-10T15:53:19Z")
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