メーカークリックイベント用に別のテンプレートを作成したい。しかし、マーカーをクリックすると、空のテンプレートが表示されます。テンプレートtest.html
が読み込まれていません。なぜそれが起こっているのですか。
主なビュー
<ui-gmap-google-map center="map.center" pan="false" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="markers" idkey="id" coords="'coords'" events="markerEvents" icon="'icon'">
<ui-gmap-windows show="windowOptions.show" options="windowOptions" closeClick="closeWindow" templateUrl="'test.html'"
templateParameter="maker_info">
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
マーカー テンプレート
test.html
<div ng-controller="templateController">
Template ID: {{parameter.id}}
</div>
Controller.js
'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
.controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi, uiGmapIsReady) {
uiGmapGoogleMapApi.then(function(maps){
$scope.markers =[];
$scope.maker_info = [];
$scope.map = {
center: {
latitude:39,
longitude: -98
},
zoom: 5,
bounds : {},
control : {}
};
$scope.windowOptions ={};
$scope.windowOptions.show = false;
});
uiGmapIsReady.promise().then(function (instances) {
$scope.markers = [{
"id": "1",
"coords":{
"latitude": "39.05",
"longitude": "-98.55"
}
}, {
"id": "2",
"coords":{
"latitude": "39.15",
"longitude": "-98.45"
}
}, {
"id": "3",
"coords":{
"latitude": "39.25",
"longitude": "-97.95"
}
} ];
$scope.markerEvents= {
click: function(marker, eventName, model, args) {
$scope.windowOptions.show = true;
$scope.maker_info = model;
$scope.$apply();
}
};
});
})
.controller('templateController',function(){});