How many times have you gone through a full day without accessing Google Maps or searching for a local store, restaurant, service, etc.? I’ll bet you not many these days. With everyone going mobile and the popularity of smart phones, location-based services are an important part of the internet’s future. The good folks at W3C know this and have created a Geolocation API specification that browsers can implement so that web sites can take advantage of using the client’s location for whatever feature they want. The user does need to give the web site permission to look up his/her current location so thankfully there are some safeguards for the user in the event they have privacy concerns.
Looking up the user’s location is a pretty simple process. In JavaScript, you can access a user’s location by using the “navigator.geolocation” object. Below is a quick example, first the HTML:
<input type="button" onclick="getLocation(); return false;" value="Get My Location" />
And now our JavaScript:
var p = document.getElementById("location");
p.innerHTML = msg;
p.style.color = (!isError) ? "#000" : "#c00";
p.style.display = "";
}
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onGeoLocSuccess, onGeoLocError, { maximumAge:300000 });
showMessage("Fetching location...");
} else {
showMessage("Sorry but your browser doesn't support the geolocation API.", true);
}
}
function onGeoLocSuccess(position) {
showMessage("You are currently at: <br />latitude: " + position.coords.latitude + "<br />longitude: " + position.coords.longitude
+ "<br />accuracy: " + position.coords.accuracy + "<br />as of time: " + position.timestamp, false);
}
function onGeoLocError(error) {
switch(error.code) {
case error.TIMEOUT:
showMessage("The geolocation request timed out.", true);
break;
case error.PERMISSION_DENIED:
showMessage("The page does not have the proper permission to make a geolocation request.", true);
break;
case error.POSITION_UNAVAILABLE:
showMessage("Sorry but your current position is unavailable.", true);
break;
}
}
In the “getLocation” method we are first checking the browser to see if it supports the geolocation API. Once we determine that, a call to the “getCurrentPosition” method is made. This method’s only required argument is a success callback function. Additional optional arguments are an error callback function and any options we want to send to the geolocator. For our purposes we give the two callback functions and also tell the locator that the current location returned should be no older than 5 minutes old.
On a successful return, our callback function takes one argument and that is the position object. The two properties of this object are the coordinates object and also a timestamp telling us when the current position was determined. Our coordinates property provides information such as latitude and longitude of the client. We are just displaying those coordinates to the user in our example but you could use that information to do local searches, plot a position on a map, GPS tracking, etc. Location-based applications are popping up all over the place and with this new API, you can enable that feature on your site too! If you’d like to read more about the specification, visit W3C’s Geolocation API specification.