CODEWITHSUNDEEP
javascriptajaxangularjsgoogle-maps
DevonAero
DevonAero

Reputation: 75

Can't return coordinates from AJAX call to Google Maps API?

I'm building a weather app where the first step is to retrieve the longitude and latitude for a city name. I'm using Google Maps get the info.

However my code only works when I return the value inside the call. I might be a little fuzzy on scopes, but I thought for sure the code in my Angular factory would work.

When I log cords inside the callback it works perfectly, but outside it return an empty string.

How can I get the cords from the Maps API so I can use it in the call to the weather api?

Thanks in advance for any help!

weatherService.getWeather = function(city)  {

        var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
            cords = '';

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({'address': city}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                cords += results[0].geometry.location.lng() + ',' + results[0].geometry.location.lat();
                console.log(cords); // works :)
            }
        });


        var deferred = $q.defer();
        var weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + cords;

        $http.get(weatherUrl)
            .success(function(data) {

                deferred.resolve(data);

            }).error(function(err) {

                deferred.reject(err);

            });

        console.log(cords) // nothing


        return deferred.promise; 

    };

    return weatherService;

Edit: Ended up just including a jQuery synchronous Ajax call in my service. That'll do for now until I get more comfortable with Asynchronous programming. Thanks for all the help guys, really appreciated!

Upvotes: 0

Views: 230

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133370

I think you should declare the var cords outside the function

this way 

var cords;
weatherService.getWeather = function(city)  {

    var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
        cords = '';

otherwise the cords content is not available in the other part of program

And second seem you have a mistake in 

var weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords;

You use coords in this place and not cords

Upvotes: 1

grgdne
grgdne

Reputation: 239

The call to Google Maps geocode() function is asynchronous. Try it like this:

weatherService.getWeather = function(city)  {

    var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
        cords = '';

    var geocoder = new google.maps.Geocoder();

    return geocoder.geocode({'address': city}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            cords += results[0].geometry.location.lng() + ',' + results[0].geometry.location.lat();
            console.log(cords); // works :)
            return getWeatherData(cords);
        }
    });


    function getWeatherData(coords) {
        var deferred = $q.defer();
        var weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords;

        $http.get(weatherUrl)
            .success(function(data) {

                deferred.resolve(data);

            }).error(function(err) {

                deferred.reject(err);

            });

        console.log(coords) // should see the coords


        return deferred.promise;
    }

};

return weatherService;

Upvotes: 1

Related Questions