返回警告“未定义”的javascript对象

Question

I apologize ahead of time because I feel like this is such a simple question, but I'm new so I don't quite understand how to do it yet!

I'm geocoding an address and I return the coordinates:

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

//Submit listener and alert the coordinates
submit.addEventListener('click', function() {
    alert(geocodeAddress(geocoder, map)));
});

//Geocodes an address and returns the lat lng
function geocodeAddress(geocoder, resultsMap) {
    geocoder.geocode({address: address.value}, function(addressLatLng, status) {

        //Checks if status returned was ok
        if (status === google.maps.GeocoderStatus.OK) {

            //adds pin to map and centers map on pin
            resultsMap.setCenter(addressLatLng[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                position: addressLatLng[0].geometry.location
            });
            //alert(addressLatLng[0].geometry.location);
            return(addressLatLng[0].geometry.location);
        } else {
            alert('No address was found, please try again!');
        }
    });
}

If I alert them inside the function, it alerts them correctly (ie {20.12345, 20.12345}. If I alert them on the submit button, it just says "undefined." How would I correctly return those coordinates? (I ultimately have to do something with them, not just alert them) Thanks!

Answer 1

This should work

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

//Submit listener and alert the coordinates
submit.addEventListener('click', function() { //This is callback
    geocodeAddress(geocoder, map, function(loc){
      alert(loc || 'No address was found, please try again!');   
    });
});

//Geocodes an address and returns the lat lng
function geocodeAddress(geocoder, resultsMap, cb) {
    geocoder.geocode({address: address.value}, function(addressLatLng, status) {

        //Checks if status returned was ok
        if (status === google.maps.GeocoderStatus.OK) {

            //adds pin to map and centers map on pin
            resultsMap.setCenter(addressLatLng[0].geometry.location);
            var marker = new google.maps.Marker({
                map: resultsMap,
                position: addressLatLng[0].geometry.location
            });
             //call cb with location details
            cb(addressLatLng[0].geometry.location);
        } else {
            //call the callback with empty value
            cb('');
        }
    });
}

Hope this helps!

Answer 2

I believe this is an async problem. You need to return a Promise from your function, and then call the alert when the promise is fulfilled.

The reason alert is showing undefined is because the function hasn't finished yet, so it hasn't returned by the time the alert is shown.