How to use angular-google-maps <markers> directive? How to use angular-google-maps <markers> directive? angularjs angularjs

How to use angular-google-maps <markers> directive?


As you figured out, it's stated in here: http://angular-ui.github.io/angular-google-maps/#!/api/markers that the value of the property coords must be between quotes.

Also, in v1.1, for each marker you need to define an id (the name of the id property is given by idKey), which defaults to model.id,

so, in your case, and for it to work now it would have to be

<markers models="vehicles" coords="'last_known_location'"></markers>

and the vehicles array, for instance:

$scope.vehicles = [{  id: "first",  stuff: "stuff",  last_known_location: {      latitude: 37.3694868,      longitude: -5.9803275  }}];

(Notice the id property)


I don't think you need to define the array again after you already defined it for you models. Can you try:

<markers models='vehicles' coords='last_known_location'>  </markers>

If you didn't have them within last_known_location and just within the parent object, the API says you can use 'self' to identify the the objects contain lat and lng


Two things:

First, add [] to your definition of last_known_location in order to make it an array of objects. In this test page for Angular Google Maps, the coords do not work without it. http://www.directiv.es/angular-google-maps

Second, make sure vehicles is accessible to your module. The best way to do that is by making it a part of $scope.

angular.extend($scope, {    vehicles:        stuff = "stuff",        last_known_location:  [{          latitude: 45,          longitude: -74        }]  });

Then the markup in @jOshT's response will work:

<marker models='vehicles' coords='last_known_location'>  </markers>

UPDATE

Per comments, I misunderstood that this implementation is using markers instead of marker. The former requires the coords object to be a string and the later requires an expression. Serializing the last_known_location with the original code will work.