About Geolocation in HTML 5

Question

Google Maps can now pinpoint my location with street precision with the help of Firefox.

I understand this is a new feature of HTML 5 compatible browsers and that the location is fetched by using some sort of feature of the connected WiFi network (I hope I'm not making any silly assumptions).

What I intend to know is how this whole process exactly works:

• Why only in HTML 5?
• Why / how does Firefox ask me to share my location with Google Maps?
• What is the normal precision one can count on?
• How can I implement this feature in my websites?

Thanks in advance!

Pelagian

Is it April 1st already? :) street precision? On a stationary PC? You must be joking. – Parakeet

No way, this seems to actually exist. arstechnica.com/old/content/2008/10/… – Parakeet

@Pekka: Told ya! =) And I don't even have Gears installed AFAIK. – Pelagian

Doesn't seem to be HTML specific, but HTML 5 seems to bring an interface: html5demos.com/geo See here for the w3c specs: dev.w3.org/geo/api/spec-source.html – Parakeet

Answer 1

How does it work?

When you visit a location-aware website in Firefox, the browser will ask you if you want to share your location.

If you consent, Firefox gathers information about nearby wireless access points and your computer’s IP address, and will get an estimate of your location by sending this information to Google Location Services (the default geolocation service in Firefox). That location estimate is then shared with the requesting website. (Source)

How accurate are the locations?

Accuracy varies greatly from location to location. In some places, the geolocation service providers may be able to provide a location to within a few meters. However, in other areas it might be much more than that. All locations are to be considered estimates as there is no guarantee on the accuracy of the locations provided. (Source)

In my case, Firefox reports that I am about 10km away from my real location.

How do I use this feature in my website?

You would do something like this:

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

        alert(position.coords.latitude + ", " + position.coords.longitude);

        // Use the latitude and location as you wish. You may set a marker
        // on Google Maps, for example.
    }); 
} 
else {
    alert("Geolocation services are not supported by your browser.");
}  

You can see an online demo here: Firefox HTML 5 Geolocation Demo (Requires a geolocation-aware browser such as Firefox 3.1b3.)

Reconstruction

I know it's only an example, but please never alert(); messages like that. There's loads of websites that alert("You need to install the latest Flash/Silverlight/whatever"); which is a) stupid and b) a complete pain in the bum when I'm using a device that doesn't support them. – Comprador

@Olly: I agree 100%. However in such examples I consider the alert() method as some sort of pseudo-code function. Everyone understands what alert() means so it does its job for readability purposes... I hope that everyone understands that it should never be used like that (or probably never at all!). – Reconstruction

@DanielVassallo So,firefox implementation of w3c's Geolocation API uses Google's Location Service?.. And,Chrome also must use the same. So,inturn everyone is using Google's Location Service?? – Pelotas

Answer 2

HTML5 supplies an API

which allows the web browser (and then hence the server-side of an web application) to query the location and related information such as speed (if relevant), in a standard, uniform, fashion.

The host and its web browser supply the "devices" which compute/estimate the geolocation per-se

For this API to be useful, requires that the underlying host and web browser
  a) allow the sharing of such info (note the privacy issue) and
  b) be somewhat equipped (either locally or by way of the network they are hooked-up to) to read or estimate the geolocation.

The techniques and devices involved in computing the actual location involves a combination of the following (not all apply of course), and is independent from the HTML 5 standard:

• GPS device (lots of phones now have them)
• Routing info at the level of the Cell phone network
• IP address / ISP routing information
• Wifi router info
• Fixed data, manually input (for pcs which are at a fixed location)
• ...

Therefore...
- HTML5 alone cannot figure out geolocation: upgrading to newer web browser, in of itself, won't be sufficient to get geolocation features in your applications etc.
- Geolocation data can be shared outside of the HTML5 API, allowing GPS-ready or GeoLocation-ready phones expose the geolocation data within other APIs.

Synapsis

Answer 3

HTML5 Geolocation API uses certain features, such as Global Positioning System (GPS), Internet Protocol (IP) address of a device, nearest mobile phone towers, and input from a user, in the users’ device to retrieve the users’ location. The users’ location retrieved by using the Geolocation API is almost accurate depending upon the type of source used to retrieve the location.

There is a really good demo of HTML5 Geolocation here (http://html5demos.com/geo). Whenever a website tries to fetch your location by using one of the following mentioned APIs, the browser will ask me your permission before invoking the API to share your location.

The Geolocation API provides the following methods:

• getCurrentPosition(successCallback, errorCallback, options)

  Used to retrieve the current geographical location of a user.

• watchPosition(successCallback, errorCallback, options)

  The function returns a watchId and calls successCallback with the updated coordinates. It continues to return updated position as the user moves (like the GPS in a car).

• clearWatch(watchId)

  Stops the watchPosition() method based on the watchId provided.

Sample Code:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(userPositionSuccess, userPositionError);
} else {
  alert("Your browser does not support geolocation.");
}

function userPositionSuccess(position) {
  alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}

function userPositionError() {
  alert("There was an error retrieving your location!");
}

Southbound