baoqger baoqger - 6 months ago 25
AngularJS Question

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.....

Answer

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");
            });
    };
});