Search code examples
angularjsng-map

Simple in ngRepeat in ngMap not working

I thought I had done this sort of thing before but I'm stuck trying to do something simple. This is my HTML using ngMap

<html ng-app="myApp" ng-controller="mapCtrl as map">
....
<map center="52.374, 4.899" zoom="12">
  <marker ng-repeat="m in map.data" title="{{m.name}}" position="{{m.lat}},{{m.lng}}"></marker>
</map>

and then I have a controller:

angular.module("myApp")
.controller('mapCtrl', function() {
    var vm = this;

    vm.data = [
        {"name": "A1", "lat":52.38, "lng":4.9},
        {"name": "A2", "lat":52.39, "lng":4.87}
    ];

    return vm;
});

I'm ending up with 6 markers all at 0,0, rather than 2 in Amsterdam - See Plnkr. Any ideas what's wrong?

Solution

  • In this case name conflict occurs. The map directive creates map object in scope over already defined controller object. So just rename mapCtrl as map to something else. For example mapCtrl as mapCtrl.