Custom Widget: Map

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.

Hello all,
is this widget expected to be working in these days (Sep 2021)?
I do have a fresh OH installation (RPI 3+, OH 3.1) imported this widget and only I get, is blank/empty panel in the Habpanel.
Thanks for any ideas.
Jan K.

Yes, it’s working for me.

However @ysc :slight_smile:
I changed the widget and added a 7th Marker (and removed the accuracy stuff, which I don’t use).
The 7th Marker will not show up though.
Is there anything else I need to change beside this:

I guess I found it in map.controller.js
r (var i = 1; i <= 6; i++) {
and will mess it up a little :wink:

Yes, works like a charrm with “7”

1 Like

Same issue for me. I only see a blank widget on OH 3.2.0M4
Never mind, I should have read all posts and the installation instruction. Forgot to git clone the html stuff
I should have read thoroughly the installation process and missed this part.

cd /etc/openhab/html
git clone

Works like a charm now :smiley:

1 Like

hi, anybody using this with Openhab 3.x?

I installed from github and It’s basically working.

But the only place where I can use it is as a “page” of type “Map view” on it’s own. I have found no way to embed this map into another layout (page?).

I just started with 3.2 and might miss something obvious?