Hello,
I'm struggling to find the best way to use angular with google map api v3.
For info, I'm using the awesome IONIC framework.
What I'm trying to achieve is to pull a list of shops from a restfull api I
have running, get the distance from the current user for each and display
them in a list ordered by closest
The below code works sort of, but it starts displaying all destinations
before each of them have resolved a distance.
Any idea how to make this work a bit more efficiently?
Many Thanks,
Orion
.controller('ShopsCtrl', function(myUser,myService, $scope,
$ionicLoading,$rootScope) {
$rootScope.show('Please wait.. Getting Shops');
myUser
.getLatLong()
.then( function( latLong ){
return myService.getItems( latLong );
}).then( function(){
return myService.findDistance();
}).then( function( d ){
$scope.shops= d;
$rootScope.hide();
});
})
.factory('myService', function($rootScope, $http, $q,
$cacheFactory,myUser,$ionicLoading) {
var cache = $cacheFactory('myShops');
return {
getItems: function(latLong) {
var shops= cache.get('shops');
if (!shops) {
return $q.all([
$http.jsonp('http://url')
])
.then(function(results) {
cache.put('shops', results[0].data.posts);
return results[0].data.posts;
}
);
}
return bottleshops;
},
findDistance: function() {
var shops = cache.get('shops');
myUser.getLatLong()
.then( function( latLong ){
angular.forEach(shops, function(shop, key) {
var origin = new
google.maps.LatLng(latLong.lat, latLong.long);
var destination =
shop.custom_fields.address[0];
var service = new
google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode:
google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
var dist =
response.rows[0].elements[0].distance.text;
var order =
response.rows[0].elements[0].distance.value;
shops[key].order = order;
shops[key].distanceFromUser = dist;
cache.put('shops', shops);
}
});
}).then( function( shops){
return shops;
});
return shops;
}
}
)};
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
