I'm really struggling with basic Javascript here... basically, I'm trying to make a function that, when called, sets two variables (longitude and latitude) so that I can run other functions straight afterwards that uses these values.

When I try to alert out the longitude value however, it es back undefined.

Here's my code.

var latitude;    
var longitude;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function displayLocation(position, latitude, longitude) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  return;
}

function newLocation(longitude) {
  alert(longitude);
}

window.onload = function() {
  getLocation(); 
  newLocation();
}

Any help will be seriously appreciated! Thanks.

I'm really struggling with basic Javascript here... basically, I'm trying to make a function that, when called, sets two variables (longitude and latitude) so that I can run other functions straight afterwards that uses these values.

When I try to alert out the longitude value however, it es back undefined.

Here's my code.

var latitude;    
var longitude;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function displayLocation(position, latitude, longitude) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  return;
}

function newLocation(longitude) {
  alert(longitude);
}

window.onload = function() {
  getLocation(); 
  newLocation();
}

Any help will be seriously appreciated! Thanks.

• javascript

• hint: anytime a function takes another function as an argument, you can betcha the function being passed won't be called immediately (or will be called multiple times). – John Dvorak Commented Dec 10, 2012 at 22:27
• at what point does it show undefined? – kennypu Commented Dec 10, 2012 at 22:28
• @kennypu in the alert, I guess ;-) – John Dvorak Commented Dec 10, 2012 at 22:28
• also, in your displayLocation, you have latitude, and longitude as parameters. I'm assuming those are getting set (the parameter), instead of your global variable. – kennypu Commented Dec 10, 2012 at 22:29

3 Answers 3

There are a few problems with the code you posted:

The arguments to displayLocation are hiding your global variables. When you make the assignments here, you are actually assigning to your argument variables, which are in the local scope.

function displayLocation(position, latitude, longitude) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
}

IIRC, the callback to geolocation.getCurrentPosition only takes the first argument, so you shouldn't have to define the latitude and longitude as arguments.

Same problem in the newLocation function. You call it without arguments, but the longitude argument is "hiding" the global variable.

These are small syntax problems. However there is another problem in the code, which is a bit trickier to solve.

When the page is loaded, you call the two functions sequentially:

window.onload = function() {
    getLocation(); 
    newLocation();
}

The second function, newLocation, expects that getLocation has set the global variables. This, however, may not be the case. When the getLocation function calls geolocation.getCurrentPosition, it's performing an asynchronous operation. The next line after the call continues to execute immediately, but the callback function displayLocation has not necessarily been called yet. This can be a bit plicated to understand at first, but basically you need to only call newLocation after displayLocation has run.

So it gets plicated? That's why it's considered a good practice to try to avoid global variables altogether. Javascript often forces us to do asynchronous programming, and trying to understand all the possible states in which the global variables could be at any given time could drive you mad.

Instead, if possible, you should always use function arguments directly. For example in your scenario, you could skip the displayLocation step entirely, and go straight to newLocation:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(newLocation);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function newLocation(position) {
    alert(position.longitude);
}

So global variables are no longer needed.

I'm sure that the example code you posted is simplified, and your actual code is more plicated, but if you're able to follow these principles, I think you'll have a better time with javascript.

You never assign anything to your global variables.

The assignments in displayLocation refer to the function parameters latitude/longitude (which are local variables in the function), not the global variables outside.

Wrong:

var x;

function foo(x) {
  x = 42; // ^ assigns to this x, not the global variable
}

foo(0);
alert(x);  // undefined

Right:

var x;

function foo() {
  x = 42;  // no local x in scope here
}

foo();
alert(x);  // 42

I find 2 problems in your code.

First,in function displayLocation , you use 2 variable latitude and longitude, they refer to local variable as function arguments, not the global ones. To fix this ,remove the last 2 function arguments like this: displayLocation(position) or use window.latitude,window.longitude instead(not remended).

Second,displayLocation is a callback function which will be called after event is triggered, in your case, after browser get the location.So you don't know when displayLocation is called. If you call newLocation() , maybe displayLocation has already been called and latitude,longitude has refreshed, maybe not. So you should put alert(longitude); in displayLocation function to ensure latitude,longitude is refreshed.

hope these help.