Using ng-repeat with markers in ngMap

Question

I want to use ngMap to add Google Maps to my app.

The demos are "static" in the sense that they have only hard coded HTML. I want my code to be "dynamic" in the sense that it will periodically ask a server to look in its database and return me a bunch of coordinates to plot, which will change with time. I hope that that is clear; if not, please ask for more detail.

I modified the ngmap markers demo to generate some random lat/long coordinates every two seconds (rather than going to my server, as my final app will). Please see the Plunk.

There are no errors in the console, and it seems that ngMap is trying to add my markers, as I see a lot of this sort of thing in the console ...

adding marker with options,  
Object {ngRepeat: "myMarker in markers", position: O}
clickable: true
ngRepeat: "myMarker in markers"
position: O
A: 103.96749299999999
k: 1.387454
__proto__: O
visible: true
__proto__: Object

where K and A are the Lat/Long as I expect them to be.

BUT ... I don't see any markers on the map. What am I doing wrong?

---

[Update] An excellent answer, for which I gladly awarded a bounty afterwards. For anyone else reading this and wishing to use ngMap as @allenhwkim said in another stackoverflow question and, I think, on his blog, ngMap just creates the map for you & after that you manipulate it with the standard Google Maps API.

For instance, just before looping to add the markers, I declared
var bounds = new google.maps.LatLngBounds(); and in the loop, after adding the marker to the map, I bounds.extend(latlng); and, finally, after the loop, I

var centre = bounds.getCenter();  
$scope.map.setCenter(centre);

I forked the answer and created a new Plunk to show this. Not the world's most useful functionality, but the point is just to show how to use $scope.map with the Google Maps API. Thanks again, Allen, for ngMap.

Answer 1

Answer is here

http://plnkr.co/edit/Widr0o?p=preview

Please remember that ngMap is not replacing Google Maps V3 API.

Let me know if you have further questions.

The following is code block of the controller.

// $scope.map .. this exists after the map is initialized
var markers = [];
for (var i=0; i<8 ; i++) {
  markers[i] = new google.maps.Marker({
    title: "Hi marker " + i
  })
}
$scope.GenerateMapMarkers = function() {
  $scope.date = Date(); // Just to show that we are updating

  var numMarkers = Math.floor(Math.random() * 4) + 4;  // betwween 4 & 8 of them
  for (i = 0; i < numMarkers; i++) {
    var lat =   1.280095 + (Math.random()/100);
    var lng = 103.850949 + (Math.random()/100);
    // You need to set markers according to google api instruction
    // you don't need to learn ngMap, but you need to learn google map api v3
    // https://developers.google.com/maps/documentation/javascript/marker
    var latlng = new google.maps.LatLng(lat, lng);
    markers[i].setPosition(latlng);
    markers[i].setMap($scope.map)
  }      

  $timeout(function() {
    $scope.GenerateMapMarkers(); 
  }, 2000);  // update every 2 seconds
};  

$scope.GenerateMapMarkers();    

Answer 2

Why not do something like

<map zoom="2" center="[40.74, -74.18]">
  <marker position="{{destination.position}}" ng-repeat="destination in destinations"></marker>
</map>

If you asking for ng-repeat that would work. And you would populate the destinations with a simple http call to your backend:

$http.get(url + '/destinations', config).success(function (data) {
  if (data != null && data.total > 0) {
      $scope.destinations = data.destinations;
  } else {
      $scope.destinations = []
  }
});