javascript - Function returning undefined in Geocoder

Question

I am using Google maps v3 geocoder to geocode an address then pass the 2 coordinate points from the jQuery file to a PHP file using getJSON.

Problem: However, I notice that the function that does the geocoding function keeps returning an undefined value! Thus the PHP file receives a undefined variable. Where did I go wrong?

jQuery Code

var search_latlng = geocodeAddress(search_location);
console.log(search_latlng);

$.getJSON('/main/get_places', {search_location: search_latlng}, function(json){
        $("#result_listing").html('');
 .
 .
 .

Geocoder JS function

function geocodeAddress(address) {

    var latlng = new Array(2);

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            latlng[0] = results[0].geometry.location.lat();
            latlng[1] = results[0].geometry.location.lng();
            return latlng;
        } else {
            console.log("Geocode was not successful for the following reason: " + status);
        }
    });
}

Answer 1

You can't return a value from that function via the callback to the Google code. It makes no sense; the "geocode()" function is asynchronous. The outer function will have returned by the time that your callback runs.

The proper way to do this is to mimic the Google API itself: give your function a callback parameter, and perform your "afterwards" work from there:

function geocodeAddress(address, callback) {

    var latlng = new Array(2);

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            latlng[0] = results[0].geometry.location.lat();
            latlng[1] = results[0].geometry.location.lng();
            callback(latlng); // call the callback function here
        } else {
            console.log("Geocode was not successful for the following reason: " + status);
        }
    });
}

edit — as an example of how you'd use this:

geocodeAddress(search_location, function(search_latlng) {
  console.log(search_latlng);
  $.getJSON('/main/get_places', {search_location: search_latlng}, function(json){
    $("#result_listing").html('');
    // ...
  });
});

It's like your original code, but instead of having the geocode result returned to your code, it's passed as the parameter to the callback function you provide.