How Do I Pass A Value From A Ui-gmap-windows Infowindow/marker To Ui-sref?

I am trying to create a link inside an InfoWindow on a Google Map, using the angular-google-maps module's ui-gmap-windows. In my HTML template, I have:

Solution 1:

Here is how I ended up solving this issue, based on info found in https://github.com/angular-ui/angular-google-maps/issues/884 :

I created a template and separate controller for the InfoWindow, and changed my HTML to:

<ui-gmap-google-mapcenter='main.map.center'zoom='main.map.zoom'options='main.map.options'><ui-gmap-markersmodels="main.markers"coords="'self'"icon="'icon'"options="'options'"click="'onClick'"fit="true"><ui-gmap-windowsshow="'showWindow'"closeClick="'closeClick'"templateUrl="'templateUrl'"templateParameter="'templateParameter'"ng-cloak></ui-gmap-windows></ui-gmap-markers></ui-gmap-google-map>

As you can see, there are two new parameters now: templateUrl and templateParameter.

In the main controller, I feed in the info I need for the template:

...
marker.templateUrl = templateUrl;
marker.templateParameter = {
                             id:    item.id,
                             title: item.name,
                             href:  item.href,
                             img:   vm.lookup_extphoto[item.href] //getting a photo externally
                            };
...

In the InfoWindow's template, I have:

<divdata-ng-controller="infowindowTemplateController"><divclass="mapinfowindow"data-ui-sref="display({id: parameter.id})"><divclass="previewimage-container"><imgdata-ng-attr-src="{{:: parameter.img }}"></div><span>{{:: parameter.title }}</span></div></div>

The infowindowTemplateController itself is pretty much empty:

(function(){
    'use strict';

     angular
         .module('myapp')
         .controller('infowindowTemplateController', infowindowTemplateController);

         infowindowTemplateController.$inject=['$scope'];
         functioninfowindowTemplateController ($scope) {
         }
})();

Solution 2:

If id is definitely available within the scope acting on .mapinfowindow you could try:

<div class="mapinfowindow" data-ui-sref="display({id: '{{id}}'})"> 

(Source: https://github.com/angular-ui/ui-router/issues/395#issuecomment-59136525)

If that doesn't work, you'll probably need a custom directive.

Solution 3:

Use $parent to get the value.

Template:

<ui-gmap-markerng-repeat="marker in markers"coords="marker.coords"><ui-gmap-windowng-cloak><aui-sref="details({ id : $parent.marker.id })">Go!</a></ui-gmap-window></ui-gmap-marker>

Controller:

for(vari=0;i<mArray.length;i++) {
    varmarker= {
        id            :mArray[i]._id,
        coords        : {
            latitude  :mArray[i].address.latitude,
            longitude :mArray[i].address.longitude
        }
    };$scope.markers.push(marker);
}

Share

You may like these posts

• 
  Cannot Pass Dynamically Map Style In Angular-google-maps