As fun as it is playing around with all of the various browsers, part of me can’t help but wish they’d all implement the same features. We could get rid of WebKit-specific code, IE hacks, conditional comments, and so on.
On the other hand, certain browser-specific features can be a lot of fun to explore. Such is the case with the Firefox GeoLocation API.
It’s really easy to use and it’s got a variety of possibilities. Here’s how you can use it…
Get The Position
All of the Geolocation API’s are made available via JavaScript so all code will need to be written in said language.
To begin accessing the location API’s, you’ll need a reference to the geolocation object. The geolocation object exposes a method called getCurrentPosition that accepts a single function as a parameter. The initial setup of the code looks like this:
[cc lang=”javascript”]
navigator.geolocation.getCurrentPosition(function(oPosition) {
// …
}
[/cc]
All location information provided by the browser can be retrieved from the oPostition object that’s passed into the above function. At the most basic level, here’s how you can print out the information into a dialog:
[cc lang=”javascript”]
navigator.geolocation.getCurrentPosition(function(oPosition) {
var sLocationInfo = oPosition.coords.latitude + ‘n’ +
oPosition.coords.longitude + ‘n’ +
oPosition.address[‘streetNumber’] + ‘n’ +
oPosition.address[‘street’] + ‘n’ +
oPosition.address[‘premises’] + ‘n’ +
oPosition.address[‘city’] + ‘n’ +
oPosition.address[‘county’] + ‘n’ +
oPosition.address[‘region’] + ‘n’ +
oPosition.address[‘country’] + ‘n’ +
oPosition.address[‘countryCode’] + ‘n’ +
oPosition.address[‘postalCode’];
alert(sLocationInfo);
});
[/cc]
Handle The Exceptions
Finally, since not all browsers offer geolocation functionality, it’s worth handling the case in which the page doesn’t offer geolocation. This can be easily achieved with a basic conditional:
[cc lang=”javascript”]
if(navigator.geolocation !== null) {
navigator.geolocation.getCurrentPosition(function(oPosition) {
var sLocationInfo = oPosition.coords.latitude + ‘n’ +
oPosition.coords.longitude + ‘n’ +
oPosition.address[‘streetNumber’] + ‘n’ +
oPosition.address[‘street’] + ‘n’ +
oPosition.address[‘premises’] + ‘n’ +
oPosition.address[‘city’] + ‘n’ +
oPosition.address[‘county’] + ‘n’ +
oPosition.address[‘region’] + ‘n’ +
oPosition.address[‘country’] + ‘n’ +
oPosition.address[‘countryCode’] + ‘n’ +
oPosition.address[‘postalCode’];
alert(sLocationInfo);
});
} else {
alert(“Your browser doesn’t support the Geolocation API.”);
}
[/cc]
Easy enough, huh? I also recommend reading up more on the API in detail over at the Mozilla Geolocation page or browsing the Mozilla Developer Center article.
Of course, the downside to this particular API is that it’s native only to Firefox. This isn’t a problem if your team can target a specific browser as a platform for your application, but nothing beats having something available cross-browser.
Still, there’s a variety of ways to use this data: data logging for your visitors, integrating Google Maps,or writing a custom navigation software.
[…] GeoLocation and DesksNear.Me Posted by Tom on Oct 19, 2010We briefly talked about how to leverage Firefox’s GeoLocation API a few months ago and although the technology isn’t standard across the major browsers, each […]