Open google-map info-window with ng-map without alias in ng-controller

Question

I’m using this library (ng-map) / github.

Is giving template rejection error in my controller, how could it solve this?

Error shown: Possibly unhandled rejection: info-window Working as a template must have a container

Controller method:

 $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);
                }
            };


        };

Briefly, from here down he gets the result of the 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);

The 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>

Down here it works, where I’m going wrong?

http://embed.plnkr.co/bFyA13zPeJTM3UZPBXOP/

Answer 1

I decided without using template and it worked:

<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">
    <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>
</info-window>
<info-window id="cached_private_schools">
    <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>
</info-window>

...