Javascript function not returning value from inside another function

Question

Can someone tell me why the thelocation is returning as undefined in this example?

function codeAddress(business,address,i,locations) {
    var thelocation = geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var loc = [business, results[0].geometry.location.lat(), results[0].geometry.location.lng(), i];
            return loc;
        } 
    });
    console.log(thelocation);
}

Many thanks for the help.

Edit

Here's the full context... I have some values coming out of the database as lat & lng but only an address for others. I have to populate my array to create my map with markers but some of them have to go through the geocoder. Here's what I have that clearly doesn't work:

var locations = [];

geocoder = new google.maps.Geocoder();

<?php
    if ( !empty($posts) ) {
        $i = 1;
        foreach ( $posts as $mPost ) {

            //If we find a lat/lng override value
            if ( get_field('lat_lng_override', $mPost->ID) ) {
                $latlng = explode(",",get_field('lat_lng_override', $mPost->ID));
                echo "locations[{$i}] = ['". addslashes(str_replace("&","&amp;",$mPost->post_title))."', ".$latlng[0].", ".$latlng[1].", ".$i."];";
            } else {
            //Can't find lat/lng so get it from google
                echo "codeAddress('".addslashes(str_replace("&","&amp;",$mPost->post_title))."','".get_field('business_address', $mPost->ID).", ".get_field('city', $mPost->ID).", ON',".$i.",locations, function(loc){ locations.push(loc); });";
            }

            $i++;
        }
    }
?>

console.log(locations);

function codeAddress(business,address,i,locations, callback) {
    var thelocation = geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var loc = [business, results[0].geometry.location.lat(), results[0].geometry.location.lng(), i];
        callback(loc);
      } 
    });
}

The idea is that my array looks similar to this when I'm done:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Thanks in advance.

possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — user2864740, Oct 24 '14 at 20:33
Because `geocoder.geocode` doesn't return a value. Related questions: http://stackoverflow.com/q/14220321/218196, http://stackoverflow.com/q/23667086/218196 — Felix Kling, Oct 24 '14 at 20:41
Okay fair enough. I'm just struggling with my logic and ending up with a full array like the example. Execution is the problem so I'm just looking for ideas, if anyone is inclined to offer them. — jay, Oct 25 '14 at 22:27

score 1 · Answer 1 · answered Oct 24 '14 at 20:28

Because .geocode is an async function, so you need to use a callback!

function codeAddress(business,address,i,locations, callback) {
    var thelocation = geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var loc = [business, results[0].geometry.location.lat(), results[0].geometry.location.lng(), i];
            callback(loc);
        } 
    });
    console.log(thelocation);
}

And then to use it:

codeAddress(business, address, i, locations, function(location) {
    console.log(location);
});

score 1 · Answer 2 · edited Oct 24 '14 at 20:45

1

Theoritically speaking you can't catch the location value outside the aync task, cause you just can't say when it will complete..so your gonna have to catch it inside your callback so,

function codeAddress(business,address,i,locations) {
var thelocation = geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var loc = [business, results[0].geometry.location.lat(), results[0].geometry.location.lng(), i];
        //return location;
 console.log(loc);
 //continue with what you would like to do with the results, something small i assume! :)
    } 
  });

}

edited Oct 24 '14 at 20:45

Pogrindis

7,755
5
31
44

answered Oct 24 '14 at 20:42

Lakmal Caldera

1,001
2
12
25

1

"Theoritically speaking" ? – Felix Kling Oct 24 '14 at 20:45
good answer, not theoretical following on your point of when it will complete you could mention promises but it is outside the scope. Good answer – Pogrindis Oct 24 '14 at 20:45
@FelixKling i wonder is there a way to catch it on the fly.. Client side of course... Interesting point.. Observables ? – Pogrindis Oct 24 '14 at 20:47
even still you can only ever catch it inside the callback, no matter how you go about it, if the value ain't there you just ain't gonna see it.. lol – Lakmal Caldera Oct 24 '14 at 20:52
"on the fly" really makes no sense when applying to async calls - the callback is there because the call is async - you can't do anything with data that hasn't returned yet. – tymeJV Oct 24 '14 at 21:22

Javascript function not returning value from inside another function

2 Answers2