Why does my geocoding function return undefined?

Question

Im geocoding my address, from something like "Address 150, City" to it's latitude and longitude using Google Geocoding API. At the end of a function, im trying to return an object, which contains these two as shown in code below.

I've thought that the problem may be, that the coding takes quite some time, and since I wanted to resolve this problem today and I haven't learned await and async with promises and stuff(i will do that tommorow, dont worry), I used setTimeout instead, but it didnt solve the problem even thought I was calling console.log after the coding was done. Since I'm new to JS, I then just tried to wrap it into variable, just play with the code a little, but neither did help.

            // address
            var address = "Address 156, City"
            function geocode(address) {
                axios.get("https://maps.googleapis.com/maps/api/geocode/json", {
                    params: {
                        address: address,
                        key: "AIzaSyDaXOpbCeLYeRxWXtuSQQEbQzR14PejczM"
                    }
                })
                    .then((response) => {
                        let lngLat = {
                            lat: response.data.results[0].geometry.location.lat,
                            lng: response.data.results[0].geometry.location.lng}
                        console.log(lngLat) // here it shows me my object
                        return lngLat;
                    })
            }
            let geocodedAddress = geocode(address);
            setTimeout(function () { console.log(geocodedAddress); }, 3000);               
        }
    });

Just do the actual work where you're calling ` return lngLat;` - promises don't return values like that. — Evan Knowles, Sep 02 '19 at 20:32
@EvanKnowles Sometimes I tend to overcomplicate. Thanks for solving my problem :) — Oskar Nýč, Sep 02 '19 at 20:46

score 1 · Answer 1 · answered Sep 02 '19 at 20:34

You have no return in your function. The return in then() does not return to the outer function.

In addition, the request is asynchronous so you need to return the axios.get promise and use another then() to access the data when function is called

function geocode(address) {
  // return the promise
  return axios.get("https://maps.googleapis.com/maps/api/geocode/json", {
      params: {
        address: address,
        key: "AIzaSyDaXOpbCeLYeRxWXtuSQQEbQzR14PejczM"
      }
    })
    .then((response) => {
      let lngLat = {
        lat: response.data.results[0].geometry.location.lat,
        lng: response.data.results[0].geometry.location.lng
      };     
      return lngLat;
    });
}

// usage
geocode(address).then(lngLat => {
  console.log(lngLat);
});

score 0 · Answer 2 · answered Sep 02 '19 at 20:36

Well, I don't have access to your entire code, but an async/await approach to solve your issue you would be:

// address
var address = "Address 156, City"
async function geocode(address) {
  const response = await axios.get("https://maps.googleapis.com/maps/api/geocode/json", {
    params: {
      address: address,
      key: "AIzaSyDaXOpbCeLYeRxWXtuSQQEbQzR14PejczM"
    }
  })

  let lngLat = {
    lat: response.data.results[0].geometry.location.lat,
    lng: response.data.results[0].geometry.location.lng
  }
  console.log(lngLat) // here it shows me my object
  return lngLat; 
}

let geocodedAddress = await geocode(address);
console.log(geocodedAddress);               
}
});

Note how async/await allows you to write simple sequential logic to perform asynchronous operations.

Need another async function to do `let geocodedAddress = await geocode(address);` — charlietfl, Sep 02 '19 at 20:41
That is true, but I'm assuming there's no reason the other function cannot be `async` as well. — Telmo Trooper, Sep 02 '19 at 20:42

Why does my geocoding function return undefined?

2 Answers2