Click here to Skip to main content
Licence CPOL
First Posted 20 May 2010
Views 8,699
Bookmarked 3 times

Localize a user with the JavaScript Geolocation API

By | 20 May 2010 | Technical Blog
The web in the future will contain more localized information than it already contains today. The Javascript Geolocation API contains the tools you need to localize a user of your web site. It is very accurate and it is easy to use with a map provider like Google or Bing, so keep an eye on this API!
A Technical Blog article. View original blog here.[^]

Javascript provides a function to get the location of the current user of your web page. Currently it is only implemented in Firefox 3.5 and Safari mobile version. Also Chrome has implemented it, but it isn't turned on by default. I'm talking about the Geolocation API which is a W3C standard. It is amazing how accurate it works (in Switzerland). It normally localizes me with a 50 meters difference (about 150 feet). I build a simple web application which localizes you and shows the result on Google maps (already said, only works with Firefox 3.5 currently). It would be great if you could post how accurate it is in your country!

The Geolocation API provides a function to get the current location and another one to watch the location of the user. Both functions takes a function as input. The function which will be taken as input receives the position object, which contains the location information of the user.

//does the browser support the Geolocation API?
if(navigator.geolocation) 
{
   //will call setPosition once
   navigator.geolocation.getCurrentPosition(setPosition);

   //will call setPosition multiple times with the current position
   var id = navigator.geolocation.watchPosition(scrollMap);
}

function setPosition(position) 
{
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude
   // your code
}

The position object contains an attribute coordinate which stores longitude, latitude and altitude. But it also contains information about how accurate these position information are. The heading attribute, in the coordinate object, contains the direction of travel specified in degrees which is relative to north. Also a speed attribute is provided which contains the speed in meters of the device. The specification of the Coordinates interface looks as follows:

interface Coordinates {
  readonly attribute double latitude;
  readonly attribute double longitude;
  readonly attribute double? altitude;
  readonly attribute double accuracy;
  readonly attribute double? altitudeAccuracy;
  readonly attribute double? heading;
  readonly attribute double? speed;
};

The Geolocation API is a great thing to build web applications which shows location specific information. It is very accurate and it is easy to use with a map provider like Google or Bing. The web in the future will contain more localized information than it already contains today, so keep an eye on this API!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Mattia Baldinger

Software Developer

Switzerland Switzerland

Member

Follow on Twitter Follow on Twitter


Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralBroken link/site PinmemberPeter_in_278019:10 10 Aug '10  
GeneralRe: Broken link/site PinmemberMattia Baldinger21:04 18 Aug '10  
Generalfixed PinmemberMattia Baldinger21:18 18 Aug '10  
GeneralRe: fixed PinmemberPeter_in_278018:22 19 Aug '10  
GeneralError on my location is a bit more PinmemberDennis Dykstra17:07 7 Jun '10  
GeneralI'm not in Palo Alto PinmemberPeter_in_278015:16 24 May '10  
GeneralRe: I'm not in Palo Alto PinmemberMattia Baldinger19:07 24 May '10  
GeneralRe: I'm not in Palo Alto PinmemberPeter_in_278019:23 24 May '10  
GeneralThat "position" parameter... Pinmember_beauw_12:39 20 May '10  
GeneralRe: That "position" parameter... PinmemberMattia Baldinger23:07 20 May '10  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120517.1 | Last Updated 21 May 2010
Article Copyright 2010 by Mattia Baldinger
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid