Using the Geolocation API

The Geolocation API makes it really easy to get the location of a device using JavaScript.

Supporting browsers will expose a geolocation interface on the navigator object. This interface has a getCurrentPosition() method with a success callback that will receive a Position interface. 

navigator.geolocation.getCurrentPosition(success, error, options);

The latitude and longitude coordinates can be accessed from the Position interface like so:

navigator.geolocation.getCurrentPosition(function(position) {
  // Get the positioning coordinates.
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;

  // Do something magical...
}, function() {
  alert('Oops! An error occurred.');
});

You can also watch for location changes using the watchPosition() method.

navigator.geolocation.watchPosition(success, error, options);

The options object can be used to specify the accuracy of the data, a timeout threshold, and the maxage of cached location data.

var options = {
  enableHighAccuracy: true,
  maximumAge : 60000,
  timeout : 45000
};

FYI

  • User's will need to grant your application permission to grab their location. A permissions bar will appear at the top of the page (or an alert on mobile).
  • The accuracy of the data will vary depending on how the device is determining its location. Most phones have GPS these days but less accurate strategies (such as WiFi triangulation) may be used in the event that GPS is unavailable.
  • You'll need to be serving your site over http:// or https:// for geolocation to work.
  • GPS will consume precious battery power, use the Geolocation API wisely on mobile.

W3C Specification - Browser Support

Matt West