Estou usando esta biblioteca (ng-map) / github.
Está dando erro de rejeição de template no meu controller, como poderia resolver isso?
Erro mostrado: Possibly unhandled rejection: info-window working as a template must have a container
Método do controller:
$scope.renderMap = function(content) {
/*****
* Documentação:
* https://ngmap.github.io/
*/
$scope.dataMap = content;
$scope.typesFilter = "['address']";
NgMap.getMap().then(function(map) {
$scope.map = map;
});
$scope.template_modal = {
cached_customers:'cached_customers.html',
cached_private_schools:'cached_private_schools.html'
};
$scope.showModal = function(evt, storeId) {
var idx = $filter('FilterData')(storeId,$scope.dataMap.collection, 'id');
if (idx != null) {
$scope.store = $scope.dataMap.collection[idx];
$scope.map.showInfoWindow($scope.store.infoWindow, this);
}
};
};
Resumidamente, daqui pra baixo ele pega o resultado da API:
var private_schools = rtn.results.location_schools.private_schools;
if (private_schools.length > 0) {
for (var i in private_schools) {
collection.push({
id: private_schools[i].id,
name: private_schools[i].name,
lat: private_schools[i].latitude,
lon: private_schools[i].longitude,
infoWindow: 'cached_private_schools',
type: 'private_schools',
index: j,
image: {
url: '/webapp/sistema/img/pin_school.png',
size: [30, 32],
origin: [0, 0],
anchor: [0, 32]
}
});
j++;
}
}
var dadosMapa = {
shape: {
coords: [1, 18, 20, 23, 46, 20, 18, 1],
type: 'poly'
},
collection: collection,
center:$scope.centerMap,
zoom:zoom
}
$scope.renderMap(dadosMapa);
A view:
<div ng-controller="MyController">
<div map-lazy-load="https://maps.google.com/maps/api/js"
map-lazy-load-params="{{googleMapsUrl}}" ng-init="loadedMap = true">
<ng-map class="size-map" zoom="{{dataMap.zoom}}" center="{{dataMap.center}}">
<info-window id="cached_customers" template="{{template_modal.cached_customers}}"></info-window>
<info-window id="cached_private_schools" template="{{template_modal.cached_private_schools}}"></info-window>
<marker id="modal_{{item.id}}" ng-repeat="item in dataMap.collection"
icon="{{item.image}}"
shape="{{dataMap.shape}}"
title="{{item.name}}"
position="{{item.lat}}, {{item.lon}}"
z-index="{{item.index}}"
on-click="showModal(event, item.id)"
>
</marker>
</ng-map>
</div>
<script type="text/ng-template" id="cached_customers.html">
<div ng-non-bindable="">
Dados<br/>
Lat: {{anchor.getPosition().lat()}}<br/>
Lng: {{anchor.getPosition().lng()}}<br>
ID: {{store.id}}<br>
Nome: {{store.name}}<br>
</div>
</script>
<script type="text/ng-template" id="cached_private_schools.html">
<div ng-non-bindable="">
Dados<br/>
Lat: {{anchor.getPosition().lat()}}<br/>
Lng: {{anchor.getPosition().lng()}}<br>
ID: {{store.id}}<br>
Nome: {{store.name}}<br>
</div>
</script>
</div>
Aqui abaixo funciona, onde estou errando?