How to assign a value to an outer variable from an inner function in javascript?

Question

So, I have this piece of code:

function centermap(){
  var geocoder = new google.maps.Geocoder();
  var address = document.getElementById('office_address').value;
  var new_location = "";
  geocoder.geocode( {'address': address}, function(results, status, new_location) {
    if (status == google.maps.GeocoderStatus.OK) {
      new_location = results[0].geometry.location;
      console.log(new_location); // output is fine here
    }
    else {
      console.log("Geocode was not successful for the following reason: " + status);
    }
  })
  console.log(new_location); // output is "" - which is the init value
  return new_location // the returned object is also ""
};

$("input[id=office_address]").change(function(){
  var coordinates = new Array();
  var location = centermap();
  coordinates.push(location.geometry.location.lat());
  coordinates.push(location.geometry.location.lng());
  map.setView(coordinates, 14);
});

What am I not getting regarding the scopes here? How can I set the "outside" new_location to be the gecode result? Please feel free to point all the mistakes on my understanding on this

EDIT: I have read the answers on this and this so questions but I didn't manage to do what I want.

The important bit here is that `geocoder.geocode` is asynchronous. — James Montagne, Mar 01 '14 at 17:37

score 1 · Accepted Answer · answered Mar 01 '14 at 17:58

As somebody pointed out in the comments, the geocode function is asynchronous, so as soon as it is executed it will return without any value. Consider this workflow:

...
geocoder.geocode( ... );
// this is executed straight after you call geocode
console.log(new_location);

...
...
// probably at a certain point here your geocode callback is executed
function(results, status, new_location) {
  if (status == google.maps.GeocoderStatus.OK) {
  ...
});

The important thing is to pass a callback function to your centermap as well:

$("input[id=office_address]").change(function(){
  var coordinates = new Array();
  // pass a callback to execute when geocode get the results
  centermap(function (location){
    coordinates.push(location.geometry.location.lat());
    coordinates.push(location.geometry.location.lng());
    map.setView(coordinates, 14);
  });
});

function centermap(callback){
  var geocoder = new google.maps.Geocoder();
  var address = document.getElementById('office_address').value;
  geocoder.geocode( {'address': address}, function(results, status) {
    var new_location = '';
    if (status == google.maps.GeocoderStatus.OK) {
      new_location = results[0].geometry.location;
      console.log(new_location); // output is fine here
    }
    else {
      console.log("Geocode was not successful for the following reason: " + status);
    }
    // at this point we return with the callback
    callback(new_location);
 });
 // everything here is executed before geocode get its results...
 // so unless you have to do this UNRELATED to geocode, don't write code here 
};

Thanks a lot @MarcoCI, you pointed me at the right direction and now my leaflet map "listens" to changes on my address text field (which has a google places autocomplete function). I am going to write a short tutorial about this once I am finished with the whole project. :) — sebkkom, Mar 01 '14 at 20:23

How to assign a value to an outer variable from an inner function in javascript?

1 Answers1