Angular-google-maps issue

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 :wink:

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

1 Like

Got any answer? Same issue with my app too :frowning:

I used the standard google-map api provided from google. Works like a charm.

Soo the map works but you need your promise for what? I use this directive with all the data from my api.
you could set the variables and update them later when the promise is returned?