Reputation: 7126
I'm using angular-google-maps (http://angular-google-maps.org/) to create a map in my AngularJS application. Within the <google-map>
element, I have a <markers>
element with the models attribute set to an array which is the result of an $http.get request. For some reason though, the markers never load.
For the sake of knowing the data exists, I setup a simple list with ng-repeat next to the map to output the id of each element in the array when the result is returned and it does indeed populate the list, so I'm not sure why the markers aren't populated when using the <markers>
directive. Is it because they're being loaded from an $http.get and I need to do something different?
This is all I'm doing at the moment to get the data from the server. Trucks is a service with finder functions.
Trucks
.findAll()
.then(function(success) {
$scope.trucks = success.data;
}, function(error) {
console.debug(error);
});
My HTML looks like this.
Edit - I read the docs some more and found I need to add the coords attribute = 'self' since the longitude and latitude are part of the model itself, but the markers still don't appear
<div class="row row-fluid">
<div class="google-map col-xs-9" center="map.center" zoom="map.zoom">
<markers models="trucks" do-rebuild-all="true" do-cluster="true" coords="'self'"></markers>
</div>
<div class="col-xs-3">
<ul>
<li ng-repeat="truck in trucks">{{truck.id}}</li>
</ul>
</div>
</div>
Thanks.
Upvotes: 1
Views: 1235
Reputation: 1376
I know this seems wierd and it may not solve your issue but the do-cluster attribute should actually be doCluster. Because of the way these directives are built you actually do the Camel case for these. Can you post an example of the data you are getting back? Also, I believe do-rebuild-all would also be doRebuildAll
Upvotes: 1