Google Maps widget with traffic

Tags: #<Tag:0x00007faee0e4b1c8> #<Tag:0x00007faee0e4aed0>

I haven’t started using the HABPanel on a daily basis, I’m just started building it (and the wall tablet for it), but the main idea for me was to have a morning dashboard which will be only displayed in the morning. It seems when you don’t have it running in the foreground, it won’t do any api call

No, the items defined http request will run 24x7. So be carefull how you set the interval.

Where I can set the interval?

In the items file definition file. Please read the first post @ ’ Travel time widget’. You will see an explination of the interval. In the example its set to 300000, which is in miliseconds. (5 minutes).

ohh sorry :slight_smile: I’m talking about the actual widget and that seems that don’t really use the API if you don’t display the actual dashboard with the map

Ah ok, yes thats correct. The browser retrieves that, so when browser sleeps no requests are made.

However I’m still has this ‘false’ labels on the map. Maybe it somehow connected to regional things or I don’t know, maybe someone could help me with this?

Go to google console and navigate to the libraryu and activate the Distance Matrix API, this will give permission to do distance calculations.


tried to use this nice function.

Startet with the items part and get lots of errors in my OpenHAB Log.

018-11-18 14:13:03.833 [ERROR] [b.core.service.AbstractActiveService] - Error while executing background thread HTTP Refresh Service
java.util.UnknownFormatConversionException: Conversion = ‘F’
at java.util.Formatter$FormatSpecifier.conversion( [?:?]
at java.util.Formatter$FormatSpecifier.( [?:?]
at java.util.Formatter.parse( [?:?]
at java.util.Formatter.format( [?:?]
at java.util.Formatter.format( [?:?]
at java.lang.String.format( [?:?]
at org.openhab.binding.http.internal.HttpBinding.execute( [244:org.openhab.binding.http:1.11.0]
at org.openhab.core.binding.AbstractActiveBinding$BindingActiveService.execute( [200:org.openhab.core.compat1x:2.2.0]
at org.openhab.core.service.AbstractActiveService$ [200:org.openhab.core.compat1x:2.2.0]

The URL itself works fine within the browser.

Any ideas?

Thanks in advance.


Hi All,
I am very very new to all fo this.
I do not understand where I should be putting the map.html file. I am getting a HHTP error 404
Problem accessing …
Can anyone help me.

Win or Linux?

Both, I am experimenting on both but my final system will run on linux.
I know this is a stupid question but where is the /conf/html/google-maps/ folder.

On Windows: inside C:\openHAB2\conf\html you need to create the google-maps/ folder.
On Linux: inside /etc/openhab2/html/ (same story… create the subdir)

Ok Thanks I will try…

Ok I have google coming up in the widget and can click on it and a new page for google maps comes up.
I see only a small square as well. What should the zoom level and height be set at? could this be the problem?


Hi guys,

I got it working but it didn’t show full screen. The calculation was down the bottom which is supposed to be at top left corner.I played around the setting but none helped.Any ideas? Thanks.


1st, Thank Bastiaan for the great post. I learned a lot from this post.
Using Bastiaan’s method only show the shortest route and calculate the travel time on this route but this normally includes a lot of small roads and not always the fastest route. So I decided to find the way suits my needs.
The reasons are as below.
1:Many people are like me who needs a travel time for a specific route. If this route is congested, then consider other choices. Google map sometimes also gave wrong fastest route which confused me. And I have to use get direction some times to get the right way.
2:Using latitude and longitude is much better because some suburbs are quite big. The difference traveling to different part of the suburb sometimes is more than 10 mins.This is
the case where I am working.
The change to the map.html is not too much but I tried very hard to find the right codes. I don’t use the widget form to give variables though.

function calculateAndDisplayRoute() {
			var directionsDisplay = new google.maps.DirectionsRenderer;
			var directionsService = new google.maps.DirectionsService;

				origin : "latitude,longitude",
				destination : "latitude,longitude",
				travelMode: 'DRIVING',
				unitSystem: google.maps.UnitSystem.METRIC,
				waypoints: [
                 location: new google.maps.LatLng(latitude,longitude),
                 stopover: false,
			  	drivingOptions: {
					departureTime: new Date(,
					trafficModel: 'bestguess'

The origin,destination and waypoint use latitude and longitude. You need to try different waypoint so the map can show correct route. It is weird that using some waypoints leading to loops on maps so you may need to try many times to find the right waypoints. If your route is complicated then you might need to use a few waypoints which is harder and out of my knowledge.


Hello, i need help pls.
I need run this widget on PC in (chrome) but when i opened file map.html i see only this…:

Pls help.

Looks like you are opening the widget directly from a drive, you should use and add the widget in HABPanel.

Yes, i am opening the widget from a drive. Because this perfect widget i need run on the digital-signage displays.

Is it way to run this widget locally from a drive…?

Thank you so much.