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

Answer 1

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 = []
  }
});

Answer 2

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