Javascript local and global variables losing scope in callback function

Question

I have tried different variable scopes and none seem to work? My callback is getting a valid result but no matter the scope of the variable I assign it to I lose the value once the callback ends??

var geocoder;
var Lat;
var Long;

function codeAddress()
{


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

    var addy1......

    geocoder.geocode({ 'address': fullAddress }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            Lat = results[0].geometry.location.lat();
            Long = results[0].geometry.location.lng();

        }
        else
        {
            alert("Geocode was not successful for the following reason: " + status);
        }


    });
    alert(Lat);
    document.getElementById("Address_AddyLat").type.value = Lat;
    document.getElementById("Address_AddyLong").value = Long;
}

Thank for your input.

Looks like a dup of http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Sep 17 '13 at 04:05
They're not losing scope, they simple were not assigned a value when you accessed them. `geocode` is an **asynchronous** function, and you will need to put everything that works with its result in the callback — Bergi, Sep 17 '13 at 04:08
Well I tried that originally....and switched to this. I can try again. if (status == google.maps.GeocoderStatus.OK) { document.getElementById("Address_AddyLat").value = results[0].geometry.location.lat(); document.getElementById("Address_AddyLong").value = results[0].geometry.location.lng(); } doesn't update the form??? — GPGVM, Sep 17 '13 at 04:11

score 1 · Answer 1 · answered Sep 17 '13 at 04:11

geocode is an asynchronous function, so when you call it, it immediately returns and the next lines are executed before the value of Lat is set. Think of it this way:

geocoder.geocode({ 'address': fullAddress }, /*...*/); // 1
alert(Lat); // 2
document.getElementById("Address_AddyLat").type.value = Lat; // 3
document.getElementById("Address_AddyLong").value = Long; // 4

What you want to do is to actually read the value of Lat in the callback itself:

geocoder.geocode({ 'address': fullAddress }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        Lat = results[0].geometry.location.lat();
        Long = results[0].geometry.location.lng();

        alert(Lat);
        document.getElementById("Address_AddyLat").type.value = Lat;
        document.getElementById("Address_AddyLong").value = Long;
    }
    else
    {
        alert("Geocode was not successful for the following reason: " + status);
    }


});

Whoever down voted could rub my nose with a correct answer. Ameen it does NOT work. alert(Lat) has proper value but the document elements do not update?? — GPGVM, Sep 17 '13 at 04:17
Well, what's the type of `Address_AddyLat`? Is it an `input` with type `text`? If so, you want to do `document.getElementById("Address_AddyLat").value = Lat` (without the type) — Ameen, Sep 17 '13 at 04:20

score 0 · Answer 2 · answered Sep 17 '13 at 04:56

0

I think Ameen has the right of it. Your element reference must be incorrect.

Try this:

document.getElementById("Address_AddyLat").value = Lat;

or

document.getElementById("Address_AddyLat").setAttribute("value",Lat);

answered Sep 17 '13 at 04:56

james emanon

11,185
11
56
97

score 0 · Answer 3 · answered Sep 17 '13 at 06:25

As Ameen said geocode is a asynch process so you need to put your alert & display code in callback function. and your another mistake is that you are using lat() & lng() as a method, its not a method its a property you just need to use it directly. so your code some look like.

geocoder.geocode({ 'address': fullAddress }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        Lat = results[0].geometry.location.lat;
        Long = results[0].geometry.location.lng;

        alert(Lat);
        document.getElementById("Address_AddyLat").value = Lat;
        document.getElementById("Address_AddyLong").value = Long;
    }
    else
    {
        alert("Geocode was not successful for the following reason: " + status);
    }
});

Javascript local and global variables losing scope in callback function

3 Answers3

Linked