Angular-google-maps call after $http

Question

I need to show a map with angular-google-maps plugin with coordinates from a db after an $http call (with promise).

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

unfortunately not :( the cdn of that angular-google-maps is down right now. Got the plugin locally. I will do a fiddle if the plugin is up again! — m1crdy
– m1crdy, Commented Aug 7, 2014 at 7:48

goredwards · Accepted Answer · 2015-02-07 22:43:55Z

For this situation, call the uiGmapGoogleMapApi as part of one of your .then functions
after your $http promise returns.

Here's an example which uses the browser navigator.geolocation to get the user's current location - it can take anywhere up to a few seconds (more if user authorisation is required) so it's generally slower than an $http call.

I've wrapped the getCurrentLocation() service in a $q promise so that the controller waits until the current location is returned before loading the map. (see code in fiddle)

The same method would work for your $http call.

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, myAppServices) {
    $scope.myCurrentLocation = {};

    myAppServices.getCurrentLocation()
    .then(function(myCurrentLocation){
        $scope.myCurrentLocation = myCurrentLocation;
    })
    .then(function(){return uiGmapGoogleMapApi})    // map load call is here
    .then(function(maps){
        $scope.map = {
            center: {        // set on San Francisco as initial default
                latitude: 37.7749295, 
                longitude: -122.4194155 
            },
            zoom: 13,
            pan: 1,
            options: myAppServices.getMapOptions().mapOptions,
        };
        $scope.map.center = $scope.myCurrentLocation
    })
});

You can check out the rest of the code in the jsfiddle.

JSFIDDLE

Notes:
- I've defined the $scope.myCurrentLocation = myCurrentLocation; in it's own 'promise' (for clarity), even though it isn't really a promise - but you can equally put any synchronous task in the same promise function as the uiGmapGoogleMapApi (as shown below) - just make sure you put them before, and that you return the uiGmapGoogleMapApi or you won't have access to the maps object the promise returns:

myAppServices.getCurrentLocation()
.then(function(myCurrentLocation){
    $scope.myCurrentLocation = myCurrentLocation;
    return uiGmapGoogleMapApi})            // this is where the map load call is made
.then(function(maps){...

- I've put the $scope.map.options in a service also just to keep the controller neat and readable
- if you want to define map.options in the controller you'll have to do this within the last .then promise (ie after the map load) or you'll get 'google' is undefined type errors for definitions like mapTypeId : google.maps.MapTypeId.ROADMAP since any definitions will be hoisted, and the controller has no idea what google is until after the map is loaded

This deserves a +10. The fiddle has all you need to know to get W3C geolocation working with angular-google-maps

Collectives™ on Stack Overflow

Angular-google-maps call after $http

1 Answer 1

JSFIDDLE

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related