Custom Widget: Map

Tags: #<Tag:0x00007f617a775d48> #<Tag:0x00007f617a775be0>

Hi, I’m new to openhab, the map widget is exactly what I’m
looking for, but it is not working. Maybe someone can help me. I’m running openhab
Installed it with the green import widget button. I can add and place the widget, go to the edit menu but after save and run in the habpanel. i only see the blue square and no map. :frowning: .
Any idea what i did wrong?
Thank’s Kai

same with me, Kai.
Have you been able to solve it?

EDIT: Stupid me :wink:
I should have read thoroughly the installation process and missed this part.

cd /etc/openhab/html
git clone

Sorry for that.

Works almost perfectly.

Is there an option to prevent the zoom factor to go back to the initial one?
If I zoom in, it always zooms back.

No one, who knows how to keep the zoom factor after I zoomed in?

It automatically zooms to fit all markers. I’m sure you could edit the widget code to eliminate that functionality.

For the first start it makes sense.
But I should be able to change the zoom factor in habpanel. But it’s always switching back.

With another widget using google maps this is no problem.

The markers can also move around (e.g. track location of phones) and the widget needs to accommodate for that.
That being said, I think it would be beneficial to have an option for the behavior in the widget’s settings. Way above my skill set though.

Hopefully you will add your Google version to the gallery?

That’s what I do.
Tracking two phones and my car (beside the fixed home location).

If I would like To take a closer look on one of them, the widget will switch back to fit all into the view.

By the way, google recently changed the way you can use the api.
Now you need to register and provide a credit card or such. If you exceed the standard usage you will need to pay for it.

Hi again,

First of all, adding the defaults worked perfectly, took a while to implement the changes, haven’t had the time to play with openhab lately. So now I have a nice map that automatically zooms to fit the markers and doesn’t allow zooming or dragging, which is perfect!
I did an implementation where busses that are coming to my bus stop are shown on the map and it works nicely. There’s one tiny issue though; the location resets (my rule sets it to NULL in that case) and I’d like to remove the marker from the map in that case. I see

if (isNaN(lat) || isNaN(lng)) {

in the controller, but again have no idea what to do to remove the marker. (Tried a simple map.removeLayer(marker), but that didn’t work obviously).

Thanks again,

Replying to my own post after almost a week of trying to learn at least some of the very basic things of angular (and JS in general really!). If anyone else is interested in the funtionality, changing

if (isNaN(lat) || isNaN(lng)) {


if (isNaN(lat) || isNaN(lng)) {

in map.controller.js removes a marker that has a state of NULL from the map.


That’s great. Thanks for sharing.
I will keep this in mind for my next extension :slight_smile:

Great widget, that’s what I’m looking for. How could I change the pin label?

The one that opens when you click on a pin? It’s the item’s label, so by changing the label you change the pin label too.

I would like to have some help.

I have a panel with a map with 4 locations, tracking my family (4 iphones), zoom level 12, with centre coordinates. The widget displays them nicely.

On the same panel I want to display 4 extra maps for each of the 4 separate locations, all with zoom level 16, all without centre coordinates. But these 4 extramaps do not render well. The first 1 is showing only the world map iwth the marker on the correct place (zoomlevel 1?), the next 2 ones not showning any marker on the world map (zoomlevel 1?) the fourth one is showing the correct zoom level but the wrong location and no marker. (It looks like it is using the centre coordinates from the large map)

It works fine in the paperUI. Using OH 2.5.0 on Synology (package).

@ysc Does Anyone know what the problem is?

I installed 4 extra instances of the map-widget: map2, map3, map4, map5, (via export-import of widget-management section) in an effort to avoid that they influence each other. Now the only thing that is not working is the correct zoom-level for the first three extra maps. The last one is correct now. When I delete the fourth one, the third one will be correct.

Revisiting this code, probably the main problem might be that the external JavaScript, instead of a controller, should have been a directive with an isolated scope. It’s fairly easy to change, PRs accepted :wink:

Thx for your reply @ysc. Eventhough it would be fairly easy to change it, I had a look at it but I must confess I’m not able of coding this myself, hence “challenge not accepted” :cold_sweat:

Hi @ysc

I am using your map widget and really love it.

For my tablet, I would like to use the same code to embed a frame into my svg floorplan
See also here:

I made some progress, but just would like to use the html code from the widget in the separate iframe:

I guess, it’s pretty simple, but I am not experienced in html…
Any suggestion would be greatly appreciated.

Thanks for sharing.
I would like to hide specific location pins on request be updating the position to NULL.
Nothing of these works:

any suggestion?


I would like to use the option of displaying 6 different petrol stations on the map. However, I have difficulties with the configuration. I already have an API key.
Who can give me a complete example configuration so that it looks like the image.jpg from Yannick Schaus Maintainer?
I work with Visual Studio Code on Linux and openhab 2.57 is on ewinem Raspi 3+

Many thanks.