Variable passing IS NOT working - value Undefined

Question

I have a serious problem that i have been trying to debug for a few days already. I have a script that gets users current latitude and longitude, and then stores them in variables. however, when i try to use these variables outside this function and in the //init map zone, the map is just not showing up. by alerting out the variables i can see that outside the position function variables are set to "Undefined". here is my code:

//main function here
function initialize() {
var lat;
var lon;

//check if user has geo feature
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(
//get position
function(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    },
// if there was an error
function(error){
    alert('ouch');
});
}
//case the users browser doesn't support geolocations
else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}
//init map
var myOptions = {
    center: new google.maps.LatLng(lat, lon),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

}

Thanks for any help, Ariel

Answer 1

That is because you declare your variables within the function. The variables gets private to the initialize function and can only be accessed from within it. If you need to be able to access your variables outside of the initialize function, then move the variable declaration out of the function.

var lat;
var lon;
function initialize() {
...

Have a look at this MDN article about variable scope in JavaScript.

UPDATE

Looking through the code again I realize that the problem isn't variable scope, got confused by the indentation. I'm not familiar with the Geolocation API but I believe that the problem might be that the navigator.geolocation.getCurrentPosition() is asynchronous, as it will have to wait for the user to allow the website to get the position of the device. Therefor myOptions will have been assigned before the actual position have been retrieved - thus lat & lng are still undefined when myOptions is assigned.

Try this instead:

//main function here
function initialize() {
var lat, lon, map, myOptions;

//check if user has geo feature
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(
//get position
function(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;

    //init map
    myOptions = {
       center: new google.maps.LatLng(lat, lon),
       zoom: 16,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
},
// if there was an error
function(error){
    alert('ouch');
});
}
//case the users browser doesn't support geolocations
else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}
}