Unable to display multiple markers using ng-map

Question

I am trying to use ng-map to display multiple markers dynamically as follows.

    <div class="panel-body" style="height:300px">
      <map ng-transclude class='google-map' center='map.center' zoom="map.zoom">
          <marker ng-repeat="pos in tabledata" position="{{pos.lat}}, {{pos.lng}}"></marker>
      </map>
   </div> 

Controller code is as follows.

 $http({
        method: "GET",
        url: "http://xx.xxx.x.xx:3000/abc",
        params:{parameters}
    }).then(function(success){
        $scope.tabledata = success.data;
    },function(error){
        console.log('error ' + JSON.stringify(error));
    });

I am getting error as Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{pos.lat}}, {{pos.lng}}] starting at [{pos.lat}}, {{pos.lng}}].

Answer 1

You have a syntax error in using angular at,

position="{{pos.lat}}, {{pos.lng}}" should be position="{{[pos.lat, pos.lng]}}"

<marker ng-repeat="pos in tabledata" position="{{pos.lat}}, {{pos.lng}}"></marker>

This line should be,

<marker ng-repeat="pos in tabledata" position="{{[pos.lat,pos.lng]}}"></marker>

So, the code will be,

    <div class="panel-body" style="height:300px">
      <map ng-transclude class='google-map' center='map.center' zoom="map.zoom">
          <marker ng-repeat="pos in tabledata" position="{{[pos.lat, pos.lng]}}"></marker>
      </map>
   </div> 

HERE IS AN EXAMPLE