Google Maps widget with traffic

No that wont work, it depends on the architecture of Openhab and Angular.

OK :confused:

Thank you.

Hello everyone,

Thanks for the effords to develop this widged. I like it very much.
I have one problem i cant overcome

After a while there are shown multiple paths on the map, like if the old ones weren’t removed. After a manual refresh of the habpanel it shows clean results.
Has anyone encountered the same problem or has is solved?

Thanks in advance

Found a possible hint to the answer here: I’m investigating that.


This is brilliant. Thanks Bastiaan.

I had to create a GCP account and linking a CC to it.
At the moment I’ve got it running without any restrictions on the API Key.
Has anyone managed to restrict their API Key successfully?


I found the solution to my problem:

var directionsDisplay;
var directionsService;
globaly in line 77 of map.html

Replace line 176&177 with (remove local declaration)
directionsDisplay = new google.maps.DirectionsRenderer;
directionsService = new google.maps.DirectionsService;

and add after line 211 in the if-block:
directionsDisplay.set(‘directions’, null);

My best guess is that every time the directonsDisplay is replaced when updated, that the layer persists, somehow a handler is still remaining. With “directionsDisplay.set(‘directions’, null);” on a globaly declared variable the old directions-layer is removed and can be replaced by the new one.
There is then a recognizeable redrawing of the route.

Another thing that I found anoying is the “window.alert('Directions request failed due to ’ + status);” that shows a popup-message. I replaced that with a status in the panel; saying “OK” or “FAILED”

I hope that helps anyone.

Hi all, has anyone encountered an over-query limit with the widget?

If I look into my google api I am far away from any threshholds… can anyone point
me to where they are currently listed?

Hello everybody,

I have a small problem. Displaying the map works without any problems, but if I want to display my route to work I get a “Directions request failed due to REQUEST_DENIED” error. If the checkbox is not activated, it shows me the map including the traffic situation.
The separate Items time, distance and average are displayed and work without problems.

I have specified the starting and arrival only with Townnames and on the secound test with longitude / latitude. “51.XXXXXX, 7.XXXXXX”


Short update. I have fixed an error, but the error message still appears.
Which API’s need to be enabled on Google?
Distance Matrix API
Geocoding API
Maps JavaScript API

If you make a pull on the code on github, I’ll be more then happy to merge it.


1 Like

Hey Bastiaan,
I just want to use the items at basic UI and then create a rule that 2 times a daysent me via openhab the traffic info.

I have installed HTTP Binding and JNPth tranformation and create an item file by copying your examples with chanching API and destination.

But at openhab.log I just get errors:

2019-07-16 16:43:02.008 [ERROR] [b.core.service.AbstractActiveService] - Error while executing background thread HTTP Refresh Service
java.lang.IllegalArgumentException: Invalid uri ‘ße+60+49448+Lemförde&destinations=An+der+Bringenburg+8+49504+Lotte&language=DE&departure_time=now&traffic_model=best_guess&mode=driving&key=MYAPI’: Invalid query
at org.apache.commons.httpclient.HttpMethodBase.( ~[208:org.apache.servicemix.bundles.commons-httpclient:]
at org.apache.commons.httpclient.methods.GetMethod.( ~[208:org.apache.servicemix.bundles.commons-httpclient:]
at ~[210:org.openhab.core.compat1x:2.4.0]
at ~[210:org.openhab.core.compat1x:2.4.0]
at ~[210:org.openhab.core.compat1x:2.4.0]
at org.openhab.binding.http.internal.HttpBinding.execute( ~[?:?]
at org.openhab.core.binding.AbstractActiveBinding$BindingActiveService.execute( ~[210:org.openhab.core.compat1x:2.4.0]
at org.openhab.core.service.AbstractActiveService$ [210:org.openhab.core.compat1x:2.4.0]

Hi Bastiaan,

great widget!

I manged to get the widget and the items to work, unfortunatly it never shows me the time and distance on the widget itself.
I tried using coordinates as well as town names for destination and origin, none of it worked.

Any idea why?

What APIs from google do I have to activate?

Nevermind, had to activate the “Directions API” as well!

Very nice habpanel!

Im not so familiar with the google cloud platform.
Can you give me some hints which map services have to be activated for this widget?

Did u fix this? i’ve the same issue too

Hey everybody,
was there a change on the google API or something?
Since a couple of Days i get only a blank screen instead of the map.

I get the following when i look into my Browser Console:

vendor.js:119 Error: [$interpolate:interr]$interpolate/interr?p0={{config.serverpath%2B’%3Fgm_zoomlevel%3D’%2Bconfig.gm_zoomlevel%2B’%26gm_latitude%3D’%2Bconfig.gm_latitude%2B’%26gm_longitude%3D’%2Bconfig.gm_longitude%2B’%26gm_travel%3D’%2Bconfig.gm_travel%2B’%26gm_origin%3D’%2Bconfig.gm_origin%2B’%26gm_destination%3D’%2Bconfig.gm_destination%2B’%26gm_apikey%3D’%2Bconfig.gm_apikey%2B’%26gm_distance_label%3D’%20%2B%20config.gm_distance_label%2B’%26gm_average_label%3D’%2Bconfig.gm_average_label%2B’%26gm_currently_label%3D’%2Bconfig.gm_currently_label}}&p1=Error%3A%20[%24sce%3Ainsecurl]
at vendor.js:6
at Function.Ha.interr (vendor.js:213)
at r (vendor.js:106)
at c (vendor.js:130)
at vendor.js:129
at m.$digest (vendor.js:144)
at m.$apply (vendor.js:147)
at l (vendor.js:99)
at K (vendor.js:103)
at XMLHttpRequest.N.onload (vendor.js:104)

I tried to install the Map on the openhab of a friend of my. The same result there.
Can someone help me?

No problems here. Please try different, simple Origin and Destination to see if there’s an issue with that.

Installed the widget, got the API key, but am getting the Message “For security reasons, framing is not allowed.” any hint how to get this away, so I can use the widget?
Thx, Mark
EDIT: solved it, was a broken file.

1 Like

To @Gayanll @habnoob and anyone else with the Sorry! Something went wrong message
I had to explicitly enable the Maps JavaScript API in the cloud platform interface.

I also had to enable billing on my account for it to work. Did everyone else have to do this? There is free credit for a year and the cost after that is minimal, but it doesn’t seem to have been mentioned before in this thread.

1 Like

Thanks for your work!
Is there a standalone version?
I tried to rework the map.html but i´m getting a bunch of errors and no map :slight_smile:

I would like to use this on my custom website instead of HABpanel.

Thanks and kind regards

Seems you really have to pay at least 5$/month to use it now… I only get errors like “enable billing”…:frowning:

Seems you really have to pay at least 5$/month to use it now… I only get errors like “enable billing”…:frowning: