0

Why I can't get the coordinates with this code ?

The error is : ReferenceError: Can't find variable: card_Latitude.

I took the code from here: How to get longitude and latitude of a city/country inputted through an input box?

I do not understand why.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    var card_FullAddress = "Canada";

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': card_FullAddress
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var card_Latitude = results[0].geometry.location.lat();
            var card_Longitude = results[0].geometry.location.lng();
        } else {
            var card_Latitude = "ERR";
            var card_Longitude = "ERR";
        }
    });

    console.log(card_Latitude);
    console.log(card_Longitude);
</script>

JS FIDDLE

Community
  • 1
  • 1
  • 1
    Because `card_Latitude` is **local** to the callback function. If you look carefully you will noticed that you put `console.log` *outside* of the callback. Here is a simpler example: `function foo() { var bar = 42; } ; console.log(bar);`. It seems you are unfamiliar with asynchronous code, so I recommend to read this: http://stackoverflow.com/q/23667086/218196 – Felix Kling Oct 02 '14 at 15:31
  • 1
    `card_Latitude` exists in a different scope. – gdoron Oct 02 '14 at 15:31
  • So how to access it outside? I tried to remove `var` but the same error. –  Oct 02 '14 at 15:32
  • Read http://stackoverflow.com/q/23667086/218196 – Felix Kling Oct 02 '14 at 15:33
  • 1
    Also: https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function – Bergi Oct 02 '14 at 15:34
  • 1
    Welcome to the world of Asynchronous Programming. – epascarello Oct 02 '14 at 15:34
  • @FelixKling, did you [notice it](http://meta.stackoverflow.com/q/272680/601179)? – gdoron Oct 02 '14 at 15:39
  • @gdoron: Not in this case, but I have seen this before. I have no idea why this happens (never filed a bug report though). – Felix Kling Oct 02 '14 at 15:40

1 Answers1

0
var card_FullAddress = "Canada";

var geocoder = new google.maps.Geocoder();
geocoder.geocode({
    'address': card_FullAddress
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var card_Latitude = results[0].geometry.location.lat();
        var card_Longitude = results[0].geometry.location.lng();

        //Lat and long are only available in this scope! continue your code here!
        console.log(card_Latitude);
        console.log(card_Longitude);
    } else {
        var card_Latitude = "ERR";
        var card_Longitude = "ERR";
    }
});
Renato Gama
  • 16,431
  • 12
  • 58
  • 92
  • How can I access them outside if I need ? –  Oct 02 '14 at 15:39
  • Short answer; you cant. What you can do instead is using a lib like [async](https://github.com/caolan/async) to make your code clearer and avoid callback hell. You should google for JavaScript asynchronous code and callbacks on Google/StackOverflow for a more detailed explanation. – Renato Gama Oct 02 '14 at 15:42
  • 1
    @Bonito: You can declare the variables in a higher scope, e.g. in the global scope. The problem with asynchronous code is not the scope, it's the timing. Even if you make the variables globally available, you don't when they got their values assigned. You only know when the callback is called. Given this uncertainty, there is no much use in making those variables global. You should really spend some time to read all the links you got in the comments to your question, to understand the whole topic better. – Felix Kling Oct 02 '14 at 15:42
  • @Felix Kling is right! Even if you declare them in a higher scope you wont have their values filled correctly before the callback is invoked back – Renato Gama Oct 02 '14 at 15:44