Guest
Guest

Reputation: 515

In Angular-Google-map templateUrl for maker-window is not working?

I want to create separate template for maker click event. But when I click on the marker it give empty template. Template test.html is not loading. Why it is happening.

Plz see the running demo

Main Views

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

Marker template

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(){});

Upvotes: 1

Views: 293

Answers (0)

Related Questions