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? — user2864740
– user2864740, Commented Oct 24, 2014 at 20:33
Because geocoder.geocode doesn't return a value. Related questions: stackoverflow.com/q/14220321/218196, stackoverflow.com/q/23667086/218196 — Felix Kling
– Felix Kling, Commented Oct 24, 2014 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
– jay, Commented Oct 25, 2014 at 22:27

tymeJV · Accepted Answer · 2014-10-24 20:28:19Z

1

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);
});

answered Oct 24, 2014 at 20:28

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pogrindis · Accepted Answer · 2014-10-24 20:45:31Z

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, 2014 at 20:45

Pogrindis

8,3365 gold badges34 silver badges44 bronze badges

answered Oct 24, 2014 at 20:42

Lakmal Caldera

1,0312 gold badges14 silver badges26 bronze badges

5 Comments

Felix Kling Over a year ago

"Theoritically speaking" ?

Pogrindis Over a year ago

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 Over a year ago

@FelixKling i wonder is there a way to catch it on the fly.. Client side of course... Interesting point.. Observables ?

Lakmal Caldera Over a year ago

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

tymeJV Over a year ago

"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.

Collectives™ on Stack Overflow

Javascript function not returning value from inside another function

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related