A site dedicated to all the cool new stuff in the HTML5 spec.

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage


Demo

Feb 1, 2011
@ 4:00 pm
sydlawrence
Permalink

2 notes

Browser based geolocation

Since location space has been all the rage recently, and most mobile phone now have GPS, the w3c has introduced a standard in geolocation.

navigator.geoLocation

It is really easy to check if a browser supports geolocation, you just check to see if the javascript object exists:

if (navigator.geoLocation) { /* Browser supports it, do your thang */ }

Before this there have been various methods of geolocation. The most common being via ip address. The problem with ip addresses are that they dont actually have to have a specific location. From just your ip address, the geolocation could be massively incorrect. However with browser based geolocation, accuracy is far greater.

var watchId = navigator.geolocation.getPosition(successCallback, errorCallback, options)

This is mainly useful in mobile web development, however, you can have a lot of fun with it in desktop web development.

Then there is also continuous notifications. If the browser changes location, you can keep up to date with the movement by using:

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options)

Check out a demo

View some sample code

Unfortunately not all browsers support navigator.geolocation, however there are workarounds:

IP location
You can get an estimate of a location from someone’s IP address, however, this is not very accurate at all.

Loki
Skyhook have created a plugin that works on most browsers http://www.loki.com/ but you need to regsiter for an API key. It also uses a different syntax

Google Gears
Google gears is also available for older browsers, but this also uses a slightly different syntax, and the browser needs to have google gears installed.

This new standard is perfect for mobile browsers

Both iOS and Android browsers support the new API.

  1. js-html5 posted this