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://
orhttps://
for geolocation to work. - GPS will consume precious battery power, use the Geolocation API wisely on mobile.