• Demos and Downloads!
• MooTools Plugins
• About / Contact

Using Firefox’s Geolocation API

One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can use Geolocation within Firefox to get location details down to the street!

Detecting Browser Geolocation Capabilities

if(navigator.geolocation) {
	//w00t!
}
else {
	alert('No soup for you!  Your browser does not support this feature');
}

They key to detecting Geolocation within your browser is the navigator.geolocation object.

Querying For Geolocation Information

if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
		alert('Your lat-long is: ' + position.coords.latitude + ' / ' + position.coords.longitude);
		alert('You live in ' + position.address.city + ', ' + position.address.state)
	});
}

The navigator.geolocation.getCurrentPosition method is the driving force behind retrieving location details. Once you call this method (providing it a function which will execute if your request is successful), the browser will ask the user if they will allow you to retrieve their location information:

When the user allows the website to retrieve their location information, Firefox fetches the information, providing you a position object with two very useful attributes: position.coords and position.address. position.coords gives you latitude and longitude while position.address gives you streetNumber, street, premises, city, county, region, country, countryCode, and postalCode. Firefox may even take a picture of your user through his/her window soon. (Editor's note: I completely made that up)

Of course most of this functionality is only available within Firefox. Safari will retrieve the user's latitude and longitude but that's the extent of WebKit's support. I look forward to bigger and better things from the W3C's Geolocation API in the future!

Discussion

The Bottom Line