I need to show a map with angular-google-maps plugin with coordinates from a db after an $http call (with promise). I now that is is an angular-related question, but maybe one of you with a deeper understanding could help
This is the directive in my template:
<google-map center="map.center" draggable="true" refresh="true" control="map.control" data-tap-disabled="true" zoom="map.zoom">
<marker coords="marker.coords" options="marker.options" idkey="marker.id" ></marker>
</google-map>
This is the controller which handles the show of the map
.controller('FriendDetailCtrl', function($scope, $rootScope, $http, $state, $stateParams, $ionicLoading, $ionicPopup, Friends) {
$ionicLoading.show({
template: '<i class="icon ion-loading-a"></i><br>Lade Details...',
noBackdrop: true
});
// Detail Informationen holen
$scope.detail = {};
Friends.getDetail($stateParams.friendId).then(function(b) {
$scope.detail = b;
// Karte
$scope.map = {
center: {
latitude: 30,
longitude: -40
},
zoom: 12
};
// Marker
$scope.marker = {
id: 0,
coords: {
latitude: $scope.detail.lat,
longitude: $scope.detail.long
},
options: {
draggable: false
}
}
$ionicLoading.hide();
});
The Service who returns the data:
getDetail: function(friendId) {
// $http returns a promise, which has a then function, which also returns a promise
promise2 = $http({
url: "http://dev.tellthedj.de/db/getGutschein.php",
method: "POST",
data: {"gutscheinId":friendId}
}).then(function(response2) {
// The then function here is an opportunity to modify the response
// The return value gets picked up by the then in the controller.
return response2.data;
});
// Return the promise to the controller
return promise2;
}
the data from the promise, like id, name etc. is shown perfectly. Also the coordinates coming from the database. I inserted to test only integers to the coordinates. If I place the $scope.map call before the Friends.getDetail() the map works. But the call is returning a promise. Could you help? THX