CODEWITHSUNDEEP
angularjsscope
Chris Bao
Chris Bao

Reputation: 2868

How to update the latitude and longitude in google map scope map variable based on the HTTP responds

In my AngularJS WebApp, I want to use the google map to show the location. And based on my check, I find the google map angularjs directive, and it works ok.
But in my project, I will make a HTTP call to a Web API, and based on the responds (which return the geocode information) I want to update the map to make it centered at the location I got from the HTTP responds.
The whole controller block of the JS code is as following:

MyApp.controller('MyCtrl', function($scope,$http) {
var selectedCity = "Los Angeles"
var geoapi_key = "AqbfQgdDj0oHogXKLAAG1dTzQzsTzNGH";
$scope.map = { center: 
                { 
                    latitude: $scope.lat, 
                    longitude: $scope.lon 
                }, 
               zoom: 4 
             };

$scope.clickUpdate = function() { 
var geo_url = "http://www.mapquestapi.com/geocoding/v1/address" + "?" + "key=" + geoapi_key + "&" + "city=" + selectedCity;
console.log(geo_url);
$http({
    method : "GET",
    url : geo_url
}).then(
    function mySuccess(response) {
        var res = response.data
            $scope.$apply(function() {
                $scope.lat = res['results'][0]['locations'][0]['displayLatLng']['lat'];
                $scope.lon = res['results'][0]['locations'][0]['displayLatLng']['lng'];     
            })

            console.log($scope.lat);
            console.log($scope.lon);                        
    },
    function myError(response) {
        console.log("Something wrong for geo API");
    });
};

});

In this case, I add a button with ng-click=clickUpdate() method to trigger the HTTP call.

But after the HTTP's successful call, the map can't be update as I want. I guess maybe this is because the update of $scope variable is not detected by angular since it is within the callback function. So I add $scope.$apply method as following:

$scope.$apply(function() {
    $scope.lat = res['results'][0]['locations'][0]['displayLatLng']['lat'];
    $scope.lon = res['results'][0]['locations'][0]['displayLatLng']['lng'];                                 
});

But I got the error message： angular.min.js:116 Error: [$rootScope:inprog]

so what's the issue from?

EDIT:
I add the controller part here for easy debugging. I am stilled confused and under debugging.....

Upvotes: 0

Views: 475

Answers (1)

Huy Chau
Huy Chau

Reputation: 2240

You should set $scope.map.center in success function:

MyApp.controller('MyCtrl', function($scope, $http) {
    var selectedCity = "Los Angeles"
    var geoapi_key = "AqbfQgdDj0oHogXKLAAG1dTzQzsTzNGH";
    $scope.map = {
        center: {
            latitude: null,
            longitude: null
        },
        zoom: 4
    };

    $scope.clickUpdate = function() {
        var geo_url = "http://www.mapquestapi.com/geocoding/v1/address" + "?" + "key=" + geoapi_key + "&" + "city=" + selectedCity;
        console.log(geo_url);
        $http({
            method: "GET",
            url: geo_url
        }).then(
            function mySuccess(response) {
                var res = response.data

                var lat = res.results[0].locations[0].displayLatLng.lat;
                var lon = res.results[0].locations[0].displayLatLng.lng;
                $scope.map.center.latitude = lat;
                $scope.map.center.longitude = lon;

                console.log(lat);
                console.log(lon);
            },
            function myError(response) {
                console.log("Something wrong for geo API");
            });
    };
});

Upvotes: 1

Related Questions