How to transfer value from ui-gmap-windows InfoWindow / Marker to ui-sref?

Question

I am trying to create a link inside InfoWindow on a Google map using the angular -google-maps ui-gmap-windows module.

In my HTML template, I have:

 <ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'> <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true"> <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak> <div class="mapinfowindow" data-ui-sref="display({id: id})"> <span class="itemname" data-ng-non-bindable>{{ title }}</span> </div> </ui-gmap-windows> </ui-gmap-markers> </ui-gmap-google-map> 

In my controller, I have:

 uiGmapGoogleMapApi.then(function(maps) { vm.itemlist = search.getItemList(); var markers = []; _.each(vm.itemlist,function(item){ search.getGeometry(item.href).then(function(marker) { marker.title = item.en; marker.id = item.href; marker.showWindow = false; marker.options = { title: item.en, icon: markericon.normal }; marker.onClick = function() { vm.markerClick(marker); }; marker.closeClick = function() { vm.markerCloseClick(marker); }; markers.push(marker); }); }); vm.markers = markers; }); 

Please note that I use the syntax "controller as", so vm.markers in the controller appears as main.markers in the html template.

The problem I see is that the data-ui-sref="display({id: id})" in html changes state to the "display" page, but does not execute through id as the value of $ stateParams, which is clearly not good since I will not know what to show.

I have one more link to the same page created outside of InfoWindow (in the list of results), and I click on the id value:

 <div data-ng-repeat="entry in main.itemlist"> <div data-ui-sref="display({id: entry.id})"> 

Any help in getting InfoWindow's working information would be greatly appreciated.

Answer 1

This is how I decided to solve this problem based on the information found at https://github.com/angular-ui/angular-google-maps/issues/884 :

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

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

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

In the main controller, I submit the information 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 template, I have:

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

In fact, infowindowTemplateController is pretty empty:

 (function(){ 'use strict'; angular .module('myapp') .controller('infowindowTemplateController', infowindowTemplateController); infowindowTemplateController.$inject=['$scope']; function infowindowTemplateController ($scope) { } })(); 

Answer 2

If id definitely available in scope acting on .mapinfowindow , you can try:

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

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

If this does not work, you will probably need a custom directive.

Answer 3

Use $parent to get the value.

Template:

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

Controller:

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