CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
user602525
user602525

Reputation: 3264

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

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?

Upvotes: 9

Views: 13147

Answers (3)

Alfonso Embid-Desmet
Alfonso Embid-Desmet

Reputation: 3632

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)

Upvotes: 17

Rob Allen
Rob Allen

Reputation: 17749

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.

Upvotes: 0

jOshT
jOshT

Reputation: 1675

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

Upvotes: 0

Related Questions