Set variable that is out of function scope, from within function

Question

I'm trying to get the latitude and longitude of a place from a placeId but I'm unsure how to set the variables above the geocode function from within the geocode function. At the moment the console.log in the function gives me valid lat and long values and the second console.log gives me 0.00. How do I set the latitude and longitude variables that start off as 0.00?

$("#search-filter-form").submit(function(event) {
    // stop form from submitting normally 
    event.preventDefault();

    //get latlong of area:

    var geocoder = new google.maps.Geocoder();
    var address = "new york";
    var placeId = searchFilterViewModel.searchFilterAutoComplete.placeObject.placeId;
    var latitude = 0.00;
    var longitude = 0.00;

    geocoder.geocode( { 'placeId': placeId}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            latitude = results[0].geometry.location.lat();
            longitude = results[0].geometry.location.lng();
            console.log(latitude, longitude);
        } 
    }); 

        console.log(latitude, longitude);
}

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Amit, May 28 '16 at 23:02
Because it's an async call your callback function should handle the setting of latitude/longitude and map rendering. You drop thru to the second console.log() before the callback has executed. This looks relevant: http://stackoverflow.com/questions/21411358/google-maps-geocoding-a-string — John D, May 28 '16 at 23:24

score 0 · Answer 1 · answered May 28 '16 at 23:04

instead of passing an anonymous func to the submit method you could make it a named one.

then you could define static variables.

function myfunction() {
    myfunction.something = 123;
}

now you can access the var from anywhere

myfunction.something

score 0 · Answer 2 · answered May 28 '16 at 23:59

While the duplicate answer and the answer above may have also worked, this is what I did:

Moved the asynchronous function out of the form submission and into a function that runs as soon as there is a latitude and longitude to set - I don't want to risk submitting the form before the latitude and longitude are set.

Turned the anonymous callback function into an arrow callback function so that I can use "this" keyword to point to the parent of the asynchronous function, so that I am setting the parent object variable and not just the function variable:

var geocoder = new google.maps.Geocoder();

            geocoder.geocode( { 'placeId': this.placeObject.placeId}, (results, status) => {
                if (status == google.maps.GeocoderStatus.OK) {
                    this.placeObject.latitude = results[0].geometry.location.lat();
                    this.placeObject.longitude = results[0].geometry.location.lng();
                } 
            });

Set variable that is out of function scope, from within function

2 Answers2