# Widget request: Google maps with multiple pins

**URL:** <https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550>\
**Category:** HABPanel\
**Created:** [January 10, 2018, 10:35am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550 "2018-01-10T10:35:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 10, 2018, 10:35am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/1 "2018-01-10T10:35:53Z")

</div>

Hi,

I’ll start by being bluntlty honest: I am unable to create what I am going to propose, but hopefully someone else is more capable than me.  
So the situation is, that I have several phones, the locations of which I’d like to plot on the same map in HABpanel. I have the locations in OpenHAB, so the data is available.  
I came across [this](https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/) as a solution for the multiple pins, but I am hopelessly unable to adapt it for use in HABpanel. Anyone willing to try?

---

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 11, 2018, 6:41am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/2 "2018-01-11T06:41:09Z")

</div>

Found an angularJS implementation of Google Maps and [played with one of their examples](http://plnkr.co/edit/rRm9aoyHLubZRz3qw1Vp?p=preview).  
I know that the code is total bs and nowhere near actually providing usefull info. However thanks to the help of the brilliant @ysc on a previous problem, I believe it could be made into a HABpanel widget.

---

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 11, 2018, 3:03pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/3 "2018-01-11T15:03:46Z")

</div>

Well this is a boring monologue but while Googling around I stumbled upon [https://ngmap.github.io/](https://ngmap.github.io/). Looks very powerful yet simple. Still facing the same issue though that I personally lack the competence to bring it to HABpanel.

---

<div class="post-metadata">

**Author:** ![luckymallari](https://community.openhab.org/user_avatar/community.openhab.org/luckymallari/32/15259_2.png) [@luckymallari](https://community.openhab.org/u/luckymallari)\
**Post date:** [January 20, 2018, 6:58pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/4 "2018-01-20T18:58:09Z")

</div>

are you looking for something like this?

[https://community-openhab-org.s3-eu-central-1.amazonaws.com/optimized/2X/5/5cb4f03a8056552b853225e174999fd416b112de\_1\_690x388.png](https://community-openhab-org.s3-eu-central-1.amazonaws.com/optimized/2X/5/5cb4f03a8056552b853225e174999fd416b112de_1_690x388.png)

---

<div class="post-metadata">

**Author:** ![iamjoshwilson](https://community.openhab.org/user_avatar/community.openhab.org/iamjoshwilson/32/32373_2.png) [@iamjoshwilson](https://community.openhab.org/u/iamjoshwilson)\
**Post date:** [January 20, 2018, 7:46pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/5 "2018-01-20T19:46:49Z")

</div>

If you have the data in openhab, it can be done. You will need a Google API key. Have a look at the html file in this tutorial. You should be able to adapt it to your needs.

> [@Owntracks Presence Detection and Location Display on Google Map Tutorial](https://community.openhab.org/t/owntracks-presence-detection-and-location-display-on-google-map-tutorial/38721):
>
> Long time lurker here who has benefited a huge amount from this forum. I’ve seen lots of posts with questions on this topic and I have learned from some of them. I thought I would provide my solution for a working setup. This setup uses the [mqtt binding](https://docs.openhab.org/addons/bindings/mqtt1/readme.html) for grabbing the location data and [Owntracks/Mqttitude binding](https://docs.openhab.org/addons/bindings/mqttitude1/readme.html) for geofence switches. It utilizes google maps for the display of the locations. I have a “notify on motion” switch setup which when turned on, stores the users location in a var…

---

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 22, 2018, 8:06am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/6 "2018-01-22T08:06:07Z")

</div>

I did not find that when searching, or then I overlooked it. That looks exactly right! Just one question: does the page periodically refresh when locations change?

---

<div class="post-metadata">

**Author:** ![iamjoshwilson](https://community.openhab.org/user_avatar/community.openhab.org/iamjoshwilson/32/32373_2.png) [@iamjoshwilson](https://community.openhab.org/u/iamjoshwilson)\
**Post date:** [January 22, 2018, 12:28pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/7 "2018-01-22T12:28:04Z")

</div>

Unfortunately, the page is pretty much static and will not update when items update. You can however, set it up to refresh at an interval of your choosing. From your original question, it looks like you are wanting to get this in habpanel. You will want to use a frame widget, which has a setting for refresh interval.

 ![image](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/f/a/fa0e931b476b5cc44f43ee865a0bb860fb2f2498.png)

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [January 22, 2018, 3:09pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/8 "2018-01-22T15:09:54Z")

</div>

You could probably use [ui-leaflet](http://angular-ui.github.io/ui-leaflet/#!/) to display a map in a widget.

It can use OpenStreetMap tiles which means you won’t have to get an API key.

To display markers this example might help: [Leaflet directive for AngularJS](http://angular-ui.github.io/ui-leaflet/#!/examples/marker)

---

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 24, 2018, 7:59am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/9 "2018-01-24T07:59:40Z")

</div>

Thank you once again! But yes, you guessed it, I can’t get it working…  
Here’s what I’ve done:  
I downloaded angular-simple-logger.js, leaflet.js and ui-leaflet.jsand placed them in the static folder.  
Next i created a map.controller.js, which looks like this:

```javascript
angular
    .module('app.widgets')
	.controller('MarkerController', function ($scope) {

    angular.extend($scope, {
        osloCenter: {
            lat: 59.91,
            lng: 10.75,
            zoom: 12
        },
        markers: {
            osloMarker: {
                lat: 59.91,
                lng: 10.75,
                message: "I want to travel here!",
                focus: true,
                draggable: false
            }
        },
        defaults: {
            scrollWheelZoom: false
        }
    });
});

```

So it’s basically what’s on the page @ysc linked to, but slightly adapted to what he gave me for another problem I had.  
Then for the template widget I have:

```auto
<div oc-lazy-load="'/static/leaflet.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/angular-simple-logger.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/ui-leaflet.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/map.controller.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div ng-controller="MarkerController">
	<leaflet id="map-marker"></leaflet>
</div>

```

I get no error and something is being loaded, but it doesn’t look quite right, as you can see:

 ![map](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/f/7/f703e4c63d06bf20439123ce11522b174d5d1fe7.png)  
I’m probably doing something very basic very wrong, but I have no clue what and how to fix…

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [January 24, 2018, 1:44pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/10 "2018-01-24T13:44:32Z")

</div>

@mikaelgu you might be running into this:

> <https://github.com/tombatossals/angular-leaflet-directive/issues/168>
>
> I use your directive with angularJS 1.2.
> 
> If I include it with the defaults I ju…st get one single tile loaded...
> 
> My Controller just includes:
> \`
> $scope.center = {
> lat: 52,
> lng: 12,
> zoom: 14
> };
> \`
> In my view I have
> 
> \`\<leaflet defaults="defaults" center="center" height="480px" width="640px"\>\</leaflet\>\`
> 
> But I only get this view:
> !\[screenshot 2013-11-05 12 53 51\](https://f.cloud.github.com/assets/300879/1473061/fa7c4468-4610-11e3-81e9-b881fa0166ce.png)
> 
> I see that only one single tile is loaded from the web:
> !\[screenshot 2013-11-05 12 54 52\](https://f.cloud.github.com/assets/300879/1473066/2135eae6-4611-11e3-9f51-fdf43c907d19.png)
> 
> If I resize the window, all tiles come up and are displayed correct!
> 
> I use the following additional requirements:
> 
> \`
> 'ngCookies',
> 'ngResource',
> 'ngSanitize',
> 'ngRoute',
> 'ajoslin.mobile-navigate',
> 'ngTouch',
> 'leaflet-directive'
> \`
> 
> Can anyone reproduce this issue?
> 
> Thanks!

(it’s not from ui-leaflet but the library it was forked from, so it still applies)  
Basically the size of the widget is wrong because it’s computed before the gridster (dashboard grid) is completely drawn, so it’s confused. Does it fix itself if you resize the window? If so you might need to call `invalidateSize()` somehow.

Here’s the example mentioned in the GitHub thread (the link 404’s):

> **[Angular Leaflet Directive: Examples viewer](http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/hide-show-map-example)**

I’ll have a look later.

---

<div class="post-metadata">

**Author:** ![mikaelgu](https://community.openhab.org/user_avatar/community.openhab.org/mikaelgu/32/37407_2.png) [@mikaelgu](https://community.openhab.org/u/mikaelgu)\
**Post date:** [January 24, 2018, 3:39pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/11 "2018-01-24T15:39:10Z")

</div>

You are correct!  
First of all I had forgotten to loadthe css that’s mandatory. After adding that and doing some fine tuning it’s mostly working. It does ofter require a resize to properly fill up the widget, but the map is whole and draggable and such.  
On my iPad it renders the marker fine even, but on Chrome it’s not showing the marker. The controller is unchanged, but the widget not looks like:

```auto
<div oc-lazy-load="'/static/leaflet.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/angular-simple-logger.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/ui-leaflet.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/map.controller.js'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div oc-lazy-load="'/static/leaflet.css'" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div ng-controller="MarkerController">
	<leaflet id="map-marker" markers="markers" lf-center="osloCenter" height="400px" width="100%"></leaflet>
</div>

```

Now I obviously need to figure out how to pass the item state to the controller, but I think there’s a thread about that already.

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [January 24, 2018, 4:03pm UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/12 "2018-01-24T16:03:20Z")

</div>

Yeah, I had a look and made it work after some struggle with the markers which would not show up, so I used the leaflet-vector-markers additional library as demonstrated here:

> **[Angular Leaflet Directive: Examples viewer](http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/markers/icons-example)**

That way you could have different colors/icons for different markers.

So you need to download those files in `conf/html`

- [https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js](https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js)
- [https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css](https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css)
- [https://cdnjs.cloudflare.com/ajax/libs/angular-simple-logger/0.1.7/angular-simple-logger.min.js](https://cdnjs.cloudflare.com/ajax/libs/angular-simple-logger/0.1.7/angular-simple-logger.min.js)
- [https://cdnjs.cloudflare.com/ajax/libs/ui-leaflet/2.0.0/ui-leaflet.min.js](https://cdnjs.cloudflare.com/ajax/libs/ui-leaflet/2.0.0/ui-leaflet.min.js)
- [https://raw.githubusercontent.com/hiasinho/Leaflet.vector-markers/master/dist/leaflet-vector-markers.css](https://raw.githubusercontent.com/hiasinho/Leaflet.vector-markers/master/dist/leaflet-vector-markers.css)
- [https://raw.githubusercontent.com/hiasinho/Leaflet.vector-markers/master/dist/leaflet-vector-markers.min.js](https://raw.githubusercontent.com/hiasinho/Leaflet.vector-markers/master/dist/leaflet-vector-markers.min.js)

The controller `conf/html/map.controller.js`:

```js
angular
.module('app.widgets.map', ['app.services', 'ui-leaflet'])
.controller('MapController', ['$scope', '$timeout', 'leafletData', 'OHService',
      function ($scope, $timeout, leafletData, OHService) {

    // Creates a red vector marker icon
    var vectorMarkerIcon = {
        type: 'vectorMarker',
        icon: 'user',
        prefix: 'glyphicon',
        markerColor: 'red'
    };

    angular.extend($scope, {
        center: {
            lat: 59.91,
            lng: 10.75,
            zoom: 12,
        },
        markers: {
        },
        defaults: {
            scrollWheelZoom: false
        }
    });

    function onResized() {
        leafletData.getMap().then(function(map) {
            $timeout(function() {
                map.invalidateSize();
            });
        });
    }

    var resizedHandler = $scope.$on('gridster-resized', onResized);
    $scope.$on('$destroy', resizedHandler);

    OHService.onUpdate($scope, null, function (event) {
        leafletData.getMap().then(function(map) {
            $timeout(function() {
                map.invalidateSize();

                var item = OHService.getItem('DemoLocation');
                if (item && item.state.indexOf(',') > 0) {
                    $scope.markers.mylocation = {
                        lat: parseFloat(item.state.split(',')[0]),
                        lng: parseFloat(item.state.split(',')[1]),
                        message: item.label,
                        icon: vectorMarkerIcon
                    };
                }
            });
        });
    });
    
}]);

```

And the template (note the undocumented ocLazyLoad syntax to load the files sequentially):

```xml
<div oc-lazy-load="{ files: [
                       '/static/leaflet.css',
                       '/static/leaflet.js',
                       '/static/leaflet-vector-markers.css',
                       '/static/leaflet-vector-markers.min.js',
                       '/static/angular-simple-logger.min.js',
                       '/static/ui-leaflet.min.js',
                       '/static/map.controller.js'
                     ],
                     serie: true
                   }"
     style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
     data-snap-ignore="true">

  <div ng-controller="MapController"
       style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">
    <leaflet center="center"
             markers="markers"
             defaults="defaults"
             style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></leaflet>
  </div>
</div>

```

Replace the DemoLocation hardcoded item by e.g. `$scope.config.item` if you’re making a custom widget (bonus points if you share it afterwards in the gallery!)

```items
Location DemoLocation "My Location"

```

You can adapt the code for multiple items, and there’s room for improvement (don’t do anything if the item hasn’t changed for example).

![habpanel-map](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/3/5/35f1790a025549db2be53b2e2db6f9ce97f711e4.gif)

This could really use to be a reusable widget, or even a built-in one if there’s sufficient demand for it.

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [January 25, 2018, 12:06am UTC](https://community.openhab.org/t/widget-request-google-maps-with-multiple-pins/38550/13 "2018-01-25T00:06:52Z")

</div>

I ended up converting the above into a custom widget ready to install from the widget gallery (and a git clone). This is a good example of distributing a widget and its supporting files efficiently through a repository.

> [@Custom Widget: Map](https://community.openhab.org/t/custom-widget-map/39225/1):
>
> This widget will display up to 6 markers on an OpenStreetMap map, positioned by openHAB Location or String items, with configurable colors/icons and real-time updating when the underlying items’ states change. The labels of the items will be displayed in a tooltip when clicking on a marker. Use the widget gallery to navigate to this repository: [GitHub - ghys/habpanel-map-widget: Map widget for HABPanel](https://github.com/ghys/habpanel-map-widget) If you’re reading this in the gallery, click the blue Go to the repository button …