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

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
– James Montagne, Commented Mar 1, 2014 at 17:37

MarcoL · Accepted Answer · 2014-03-01 17:58:34Z

1

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

answered Mar 1, 2014 at 17:58

MarcoL

9,9893 gold badges40 silver badges50 bronze badges

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

1 Comment

sebkkom Over a year ago

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. :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related