Geolocation API

By  on  

Update long overdue -- the Geolocation API is now available in all browsers!

Mozilla Firefox Geolocation

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 the geolocation API to get location details!

Detecting Browser Geolocation Capabilities

Feature detection is the best way to confirm the Geolocation API is avilable.

if("geolocation" in navigator) {
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. Use in instead of simply if(navigator.geolocation) is important because that check may initialize geolocation and take up device resources.

Querying For Geolocation Information

The navigator.geolocation.getCurrentPosition method is the driving force behind retrieving location details:

if("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {

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:

Mozilla Firefox Geolocation Permissions

When the user allows the website to retrieve their location information, the browser fetches the information, providing you a position object with a payload that looks like:

// "Position" object
	coords: { "Coordinates" object
		accuracy: 65,
		altitude: 294.4074401855469,
		altitudeAccuracy: 10,
		heading: -1,
		latitude: 43.01256284360166,
		longitude: -89.44531987692744,
		speed: -1

	timestamp: 1429722992094269

If you want more information like country, city, and so on, you can use a third party service -- there are many out there.

This API is the foundation of many mobile apps and really should be in the toolbox of any web developer. Best yet is that all browsers now support the Geolocation API. Happy coding!

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

  • By
    Using MooTools to Instruct Google Analytics to Track Outbound Links

    Google Analytics provides a wealth of information about who's coming to your website. One of the most important statistics the service provides is the referrer statistic -- you've gotta know who's sending people to your website, right? What about where you send others though?


  1. It will be cool when this becomes a viable option on sites (when more browsers support it)

  2. mn

    @Dan: I’m going to write a book about the history of the WWW and that’s going to be the title.

  3. makepanic

    Latitude and Longitude work fine on Opera 10.60.
    Kinda scary how easy it is to get your location…

  4. Wow, this creeps me out David! You always seem to amaze me… :-O
    A feature like this could be very handy for all those annoyed people who don’t like filling in address forms. Does this always work, even with firewalls/DNS/hotspots/ripping internet from your neighbours?

  5. Adrian

    Hi…I implemented W3C Geo location within MooGeo and you can view in action some demos:

  6. lancia

    Hi…I implemented W3C Geo location within MooGeo and you can view in action some demos:

  7. Chris Willis

    Lat and Long seems to work in Chrome 6 for me.

  8. Christian Baldinato

    It’s really interesting and cool but it depends a lot on your ISP, for example, I live in Vicenza, Italy, our company uses Fastweb as ISP, and geolocation responds that I stay in Modena, a city in an other region!!!!

  9. This worked great on android’s webkit browser. Also tested in FF and Chrome and worked nice.

  10. Can you update this to use "geolocation" in navigator?

    Here is why:

  11. Gary

    Not working in Firefox 23.0.1

  12. Change the last demo part source code if(navigator.geolocation) { change to if( "geolocation" in navigator.geolocation) {

    • Wow quite an impressive feature. @Mohan i faced same issue as Gary and i tried your suggested solution but it did not work.

  13. Jamie Graham

    The browser permission dialogue box can be very annoying to users, especially when I appears on load, before the user can see the rest of the website. It’s particularly annoying on mobile, where the permission dialogue box takes over the screen.

    However this blog post outlines a good solution that involves asking the user to initiate geolocation, if they desire, from a link on the web page:

  14. Peter

    Is there a way with pure JavaScript, to show a loading element while geolocation is being retrieved?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!