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

Question

I'm using angular-google-maps in my project.

I'm trying to add multiple markers, using objects of the following definition:

vehicles = [
{
    stuff: "stuff",
    last_known_location: {
        latitude: number,
        longitude: number
    }
    
},
{
    stuff: "stuff",
    last_known_location: {
        latitude: number,
        longitude: number
    }
    
},//...etc
]

My directive looks like:

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

Vehicles is an array of objects as described above.

This doesn't work. If I change my model to just have properties of latitude and longitude and completely lose the last_known_location property and change my directive coords='self' then it works fine. What do I need to do to get this working with my json structure?

Answer 1

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)