I have the following Code:
<ng-map>
<marker ng-repeat="item in items" position="{{item[4]}},{{item[5]}}" name="{{item[1]}}" on-click="showInfoWindow('myInfoWindow')">
<info-window id="myInfoWindow">
<h4>{{this.name}}</h4>
</info-window>
</marker>
</ng-map>
The Problem is that I see the info-window but the text inside h4 is empty and not the content of {{item[1]}}
info-window directive must not be used with ng-repeat, the following example shows how to initialize a single instance of info window for markers:
angular.module('ngMap').controller('MyCtrl', function($scope,NgMap) {
NgMap.getMap().then(function(map) {
$scope.map = map;
});
$scope.cities = [
{id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
{id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
{id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
{id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
{id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
];
$scope.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" ng-controller="MyCtrl">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow" >
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>
You can do something like this
<ng-map>
<span ng-init="name='Test123'">
<marker ng-repeat="item in items" position="{{item[4]}},{{item[5]}}" name="name" on-click="showInfoWindow('myInfoWindow')"></marker>
<info-window id="myInfoWindow">
<h4>{{name}}</h4>
</info-window>
</span>
</ng-map>
