1

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}}].

Satya Narayana
  • 454
  • 6
  • 20

2 Answers2

2

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

Sravan
  • 18,467
  • 3
  • 30
  • 54
  • But i am getting Error: [$parse:syntax] Syntax Error: Token ',' is an unexpected token at column 8 of the expression [pos.lat,pos.lng] starting at [,pos.lng] after making above change. – Satya Narayana Feb 20 '17 at 11:57
  • try, `` – Sravan Feb 20 '17 at 11:58
  • This is not working for me I changed marker tag as as suggested. Getting Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{[pos.lat,pos.lng]}}] starting at [{[pos.lat,pos.lng]}}] – Satya Narayana Feb 21 '17 at 05:27
  • you changed it wrong, `[{{[pos.lat,pos.lng]}}]` should be `{{[pos.lat, pos.lng]}}`it will not be inside array, check the answer and the example demo link which I have given. – Sravan Feb 21 '17 at 06:04
  • No i did not change it this is what exactly i am using in html page. and in controller function, $http({ method: "GET", url: "http://xx.xx.xx.xx:3000/abc", params:{parameters}}).then(function(success){ $scope.tabledata = success.data; console.log('response ' + JSON.stringify($scope.tabledata) + ' sdata length is ' + $scope.tabledata.length); },function(error){ console.log('error ' + JSON.stringify(error)); }); Can you please tell me whether i can refer tabledata through $scope variable. – Satya Narayana Feb 21 '17 at 06:55
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136210/discussion-between-sravan-and-satya-narayana). – Sravan Feb 21 '17 at 06:59
0

Your position data should look like:

pos = [40.71, -73.21]

So you need convert your data to array definition. Add this function to your controller:

$scope.getCoordinates = function(oldPos){
    var newPos : [oldPos.lat,oldPos.lng];
    return newPos;
}

And use it in position:

<marker ng-repeat="pos in tabledata" position="getCoordinates(pos)"></marker>
hurricane
  • 6,521
  • 2
  • 34
  • 44
  • I used this.getCoordinates = function(oldPos) {return [oldPos.lat, oldPos.lng];} in controller function and changed marker tag as . I am getting Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":["12.32323","67.45342"],"oldVal":["12.32323","67.45342"]}.... – Satya Narayana Feb 21 '17 at 05:26
  • @SatyaNarayana in controller turn string to float – hurricane Feb 21 '17 at 05:28
  • Same issue is repeating. Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":[12.32323,67.45342],"oldVal":[12.32323,67.45342]} – Satya Narayana Feb 21 '17 at 05:31