Hi All
Recently upgraded from 2.5 to 4.3.1 and I’n getting to grips with MainUI after using HabPanel for ages.
Is there an easy way to embed Google Maps with traffic into MainUI in a similar way that was possible with the HabPanel widget that was written back in 2018?
https://community.openhab.org/t/google-maps-widget-with-traffic/40285
Thanks!
It’s not clear to me whether the widget is using Google as the source for the maps or OpenMaps for the map and drawing on that. It looks a lot like it’s using Google given the logo on the bottom left. So it should really just be a matter if figuring out the URL required to access that map. Then you can use that URL in an oh-webview-card to display it on a Layout page.
It might even be as simple as dropping the map.html file in $OH_CONF/html and using https://<path to openHAB>/static/map.html as the URL in the oh-webview-card. I don’t see anything specific to HABPanel in that file and that appears to be what renders the map.
Hi Rich, it’s definitely Google Maps and the HabPanel widget needs an API key so not sure it’ll be as simple as you suggest? It also needs the zoom level and the longitude and latitude of your desired location.
Maybe someone with a mind more brilliant than mine can code a MainUI widget? The travel times are less important for me v.s the local traffic conditions. Fingers crossed
There really isn’t anything special about this widget.
It’s really quite a simple HTML file. But since you won’t be in HABPanel you probably have to hard code the variables. Just fill out your information in this section of the HTML file:
var gm_zoomlevel = parseInt(getQueryVariable('gm_zoomlevel'));
var gm_latitude = parseFloat(getQueryVariable('gm_latitude'));
var gm_longitude = parseFloat(getQueryVariable('gm_longitude'));
var gm_apikey = getQueryVariable('gm_apikey');
var gm_travel = getQueryVariable('gm_travel');
var gm_origin = getQueryVariable('gm_origin');
var gm_destination = getQueryVariable('gm_destination');
var gm_distance_label = getQueryVariable('gm_distance_label');
var gm_average_label = getQueryVariable('gm_average_label');
var gm_currently_label = getQueryVariable('gm_currently_label');
Nothing else needs to change.
Notice the API kwy is one of the variables.
It might be possible to set variables on the oh-webview-card and they might be available to this page, but I doubt it.
Anything’s possible but MainUI has been around for four years now and no one has done it yet. So I wouldn’t hold my breath on someone implementing something different anytime soon.
But all the HABPanel widget does is offer some properties and fill in those variables for use with the HTML page. Replace those “getQueryVariable()” stuff with the real values and you should be good to go.
Brill, thanks Rich, I’ll try this in the morning when there is less wine in my line of sight 
Why not just encode it into the URL? https://ohserver/static/map.html?gm_apikey=MYAPIKEY&gm_zoomlevel=15&...
I haven’t looked that closely at the way the html page works but I assumed it was more involved than that with the starting point and destination and such. But if you can just put it all into the URL so much the better. You don’t need the html page and can just use an oh-webview-card all by itself.
Hi Rich, working with code isn’t really my core competency however I’ve got a Code editor so can give it a try. Do I simply replace the red text in brackets with the actual values?
So If I wanted to have Big Ben (51.50082833784908, -0.12464408884497456) as the centre of the map I’d edit it to read as follows:
var gm_latitude = parseFloat(getQueryVariable(51.50082833784908));
var gm_longitude = parseFloat(getQueryVariable(-0.12464408884497456));
Do I leave the single quotation marks in or do I take these out as I’ve done above?
Thanks Danny, I’ll give this a try as well. My OH is in docker container and the path for the map file is shown as: /volume1/docker/openhab/conf/html/google-maps/map.html
How would I include this in the url if my NAS local address was say 192.168.1.xxx?
Would it be http://192.168.1.xxx/volume1/docker/openhab/conf/html/google-maps/map.html ?
Sorry if this is a dumb question!
No, as follows:
var gm_latitude = 51.50082833784908;
var gm_longitude = -0.12464408884497456;
There is no variable you need to query for. There is no string to parse into a float. You just put in the float and you are done.
What @maniac103 is suggesting it to forego the map.html file entirely You can just put all the variables shown above on the call to the Google Maps URL and don’t need a widget or separate map.html file or anything like that.
No, what I was suggesting was to pass the variable content via query parameters in the URL instead of replacing them in the map.html source.
It’s likely possible to embed Google Maps directly, but the query parameters will likely be different. (The translation should be possible in map.html, which I admittedly didn’t check in detail)
OK, I misunderstood.
Updated like you suggested, but obviously with my actual API key rather than what you can see here.
Saved the html file on my NAS and successfully linked to it in a Web Frame card but only get a small black square in the corner of the card. I think we’re getting somewhere but obviously we’re not quite there yet.
I’m pretty sure you need to deal with all of those variable, not just the first four.
Not sure what all the other values should be, so I deleted lines 54 to 59 and that didn’t work 
In the HabPanel widget the travel time was optional, and I don’t need that so assumed I could just delete it?
I’ve temporally taken the IP address restriction off the API key to see if it was that, but again no joy.
You can’t just remove variables or leave them unset to something. Later parts of the map.html file use them and expect them to be set to something. If a variable was not filled in, a default value was used. See habpanel-widget-googlemaps/googlemaps.widget.json at master · BasvanH/habpanel-widget-googlemaps · GitHub for the defaults.
You can see how much I know about coding! Let me try again. 
Finally some progress! I’ve eventually got the HabPanel widget working on 4.3.1 - I removed my IP address API restriction so that was obviously causing the problem. Will have to secure my key but I can come back to that.
The objective is not to use HabPanel as I’m warming to the MainUI now, but at least it’s a step in the right direction.
Next step is to work out how to link to the map.html file. I downloaded the map file from my NAS after I’d configured the HabPanel widget thinking that the widget would directly update the values in the map.html file but it hasn’t, so simply linking to the map.html file in a MainUI web frame card doesn’t work since the values are in the widget not the file itself.
I’ve gotta go out now, so will resume this adventure tomorrow. Rich, thanks for your help so far
The map.html file should be in the $OH_CONF/html folder.In the webview widget use /static/map.html as the URL.
To take this to the next level (if desired) we can go down the path @maniac103 proposed. In that case, you’d leave the map.html unmodified from the original HABPanel version. You’d still put it into the $OH_CONF/html folder.
Burt for the URL you’d use something like:
/static/map.html?gm_zoomlevel=12&gm_latitude=51.50082833784908 ...
That would let you have more than one map on MainUI with different settings for each. However, this URL is going to be long because every variable listed above will need to be represented. So be careful of typos if going down that path.
If I get some time (
) I think something like the original HABPanel widget could be doable on MainUI. I’d like to figure out if it can be done without the map.html file though. I’m not certain tha’s possible though.
I couldn’t help myself. I published a widget on the marketplace.
It’s super simple, but I think it gets the job done. It’s published so you should be able to install it through the Add-on Store.