Very strange Javascript scoping issue

Question

The following variable my_cords is undefined when it gets to the google maps function, can anyone understand why and possible give me a work around? I have defined it right at the top and set it inside a callback function, which I have seen work on global variables before..

$(document).ready(function () {

var my_cords;
var map;

function getCareHome() {

    geocoder = new google.maps.Geocoder();

    //var address = document.getElementById("address").value;

    var address = "address here";

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            my_cords = results[0].geometry.location;

        } else {

            alert("Sorry we couldn't locate the carehome on the map: " + status);
            return false;

        }

    });



    var myOptions = {
        zoom: 7,
        center: my_cords,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

getCareHome();

});

score 4 · Answer 1 · answered Jun 14 '12 at 15:00

4

geocoder.geocode is an asynchronous function. The anonymous function that sets my_cords won't run until some event (probably the arrival of an HTTP response) fires.

Move the code that depends on it running to inside that function.

answered Jun 14 '12 at 15:00

Quentin

914,110
126
1,211
1,335

Cheers, just pipped to the post, I upped your answer though! – Jonathan Tizard Jun 14 '12 at 15:20

score 3 · Accepted Answer · edited Mar 25 '17 at 17:34

3

.geocode is an asynchronous call.

Try using callbacks in the function.

For example:

geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        createMap(results[0].geometry.location);

    } else {

        alert("Sorry we couldn't locate the carehome on the map: " + status);
        return false;

    }

});

var createMap = function(my_cords)  {
     var myOptions = {
        zoom: 7,
        center: my_cords,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

edited Mar 25 '17 at 17:34

Ivan Chaer

6,980
1
38
48

answered Jun 14 '12 at 15:00

Naftali

144,921
39
244
303

Wouldn't recommend using the `var createMap = function...` form. Other than that, +1. – T.J. Crowder Jun 14 '12 at 15:04
@ Neal: `function createMap` I'd use a function declaration, as the OP has with `getCareHome`, not a function expression. – T.J. Crowder Jun 14 '12 at 15:05
@T.J.Crowder why is my way any different? I was just showing how I create functions. I was paying no attn to the OPs declaration of functions. – Naftali Jun 14 '12 at 15:05
@ Neal: It happens at a different time, and results in a variable referring to an anonymous function. A function *declaration* happens prior to any stepwise code executing in the scope, and results in both a binding *and* a function with a proper name. More: [*Anonymouses anonymous*](http://blog.niftysnippets.org/2010/03/anonymouses-anonymous.html) – T.J. Crowder Jun 14 '12 at 15:07
@Neal You make it sound painfully easy! Thanks for the crazy fast response. Learned something new. – Jonathan Tizard Jun 14 '12 at 15:19
@Jonathan no problem ^_^ Happy to help! – Naftali Jun 14 '12 at 15:19

score 0 · Answer 3 · answered Jun 14 '12 at 15:02

Because geocode runs asynchronously, your code using my_cords later (setting up myOptions) will see the value of my_cords before the completion callback from geocode runs — and so myOptions.center will be undefined.

If you need my_cords when setting up the myOptions, you'll have to move that code into the callback on geocode.

Very strange Javascript scoping issue

3 Answers3

Linked