Factory Method always return undefined in AngularJs

Question

i create one factory method which always returns undefined when retrieving value from controller. when i write log it values come perfectly but returns undefined.

.factory('GetLatLongFromAddress', ['$http', '$q', function ($http, $q) {

  var LatnLong =
      {
          Latitude: 0.00,
          Longitude: 0.00
      }

  return         {
          GetLatLong: function (address) {
              var geocoder = new google.maps.Geocoder();
              var address = address;
              geocoder.geocode({ 'address': address }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK)
                  {
                      var latitude = results[0].geometry.location.lat();
                      var longitude = results[0].geometry.location.lng();
                      LatnLong.Latitude = latitude;
                      LatnLong.Longitude = longitude;
                      console.log(LatnLong);
                  }
              });
              setTimeout(function () { }, 3000);
              return LatnLong
          },

      }

}])

And myController in which i am calling is ;

$scope.returnValue=(JSON.stringify(GetLatLongFromAddress.GetLatLong("Address")));        

So, can you help me in this.

Thank You.

Answer 1

You are working with asynchronous request to the Google API. So response from API won't be received immediately. In you example you sent request to the API and return LatnLong before response will be received. You have tried to wait for response with setTimeout, but setTimeout function isn't working like that. There is your code sample with comments:

var geocoder = new google.maps.Geocoder();
var address = address;
geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        // This code will be executed when we receive response from Google API.
        // It can be in 2, 3 or 6 seconds. 
        // We can't tell for sure how much time it will take.

        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();
        LatnLong.Latitude = latitude;
        LatnLong.Longitude = longitude;
        console.log(LatnLong);
    }
});
setTimeout(function () { 
    // This code will be executed in 3 seconds.
}, 3000);
return LatnLong // This code will be executed immediately. So LatnLong is undefined.

When you work with asynchronous requests you need to use promises You can find more information by the next link: https://docs.angularjs.org/api/ng/service/$q

In you case next code should work:

var deferred = $q.defer();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();
        var LatnLong = {
            Latitude: latitude,
            Longitude: longitude
        };
        deferred.resolve(LatnLong);
    }
});
return deferred.promise;

This code will return promise and then you can put data into $scope this way:

GetLatLongFromAddress.GetLatLong("Address").then(function(LatLong){
    $scope.returnValue= JSON.stringify(LatLong);
});