Question

I have a (hopefully quite simple) Javascript problem. I’ve search but found nothing that is really relevant to the problem.

Basically I have a function (addToGlobe) that calls two other functions (codeAddressLat and codeAddressLng) as it runs. The two called functions should both return a float value to the first function, which then uses them. The subfunctions definitely work correctly – I did a print statement to check that the “numfinal” variable in each has a value, and it does.

However, when I add print statements to the calling function (as commented in the code), it returns ‘undefined’. Therefore, the problem seems to be when the numfinal value is returned.

Thanks 🙂

function addToGlobe(uname, uid, pmcity) {
    // Get lat & long of city
    var pmlat = codeAddressLat(pmcity);
    var pmlong = codeAddressLng(pmcity);

    log(pmlat);   // PROBLEM! Prints 'undefined'
    log(pmlong);  // PROBLEM! Prints 'undefined'

    // Rest of function removed to keep it simple
}

function codeAddressLat(inputcity) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    geocoder.geocode( { 'address': inputcity}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          var llsplit = new Array();

          bkresult = String(results[0].geometry.location);
          bkresult = bkresult.replace(/[\(\)]/g, "");
          llsplit = bkresult.split(',');

          numfinal = parseFloat(llsplit[0]);
          return numfinal;

      } else {
        log('<b><font color="#C40031">Geocode was not successful:</b> ' + status);
      }
    });
 }

  function codeAddressLng(inputcity) {
        // Basically the same function as above. Removed for simplicity
     }

Answer 1

codeAddressLat is not actually returning anything. The anonymous function it passes to geocoder.geocode is.

Since geocoder.geocode is running asynchronously, codeAddressLat can’t wait around for its answer. So codeAddressLat really can’t return anything of value. Instead codeAddressLat needs to become asynchronous too. This is a common pattern in JavaScript.

function addToGlobe(uname, uid, pmcity) {
     codeAddressLat(pmcity, function(pmlat) {
        // do something with pmlat
    });

    ...
}

function codeAddressLat(inputcity, callback) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    geocoder.geocode( { 'address': inputcity}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          var llsplit = new Array();

          bkresult = String(results[0].geometry.location);
          bkresult = bkresult.replace(/[\(\)]/g, "");
          llsplit = bkresult.split(',');

          numfinal = parseFloat(llsplit[0]);

          // instead of returning, call the callback with the result
          callback(numfinal);

      } else {
        log('<b><font color="#C40031">Geocode was not successful:</b> ' + status);
      }
    });
}