April 11, 2009

Getting the Browsers GeoLocation with HTML 5

Until now it was almost impossible to get the GeoLocation of a user browsing your site. You could try to use several services to more or less guess the current position. Most of the time they where using the IP address to tackle the problem. This was not very reliable when it came to mobile devices.

Ever since the iPhone hit the market mobile adoption of the web grew exponentially. Google threw in Android and I’m sure some Windows Mobile phones do have GPS as well. According to some talks at re:publica 09 the big telco carriers such as T-Mobile and Vodafone see their future in the mobile (geolocation aware) web.

Even though these devices had the capabilities to get the current location, website developers are still facing the problem that they can not access the positioning hardware of the phone. There was almost no way for (mobile) web developers to get the location of the user. There are some solution out there but you needed to install extra software which is not always possible on a phone.

Fortunately W3C is working on the HTML 5 standard which includes JavaScript access to the browsers location (at least I hope it will be included). The latest beta of Firefox 3.1 (beta3) already supports that API. If you don’t have a GPS system in your computer you can install an addon to set your location. Rumors has it that Apple will release the upcoming iPhone 3.0 OS with a location aware browser and Google will do the same with one of the next updates of Android.

To test that I wrote a small geolocation aware demo webpage with some JavaScript to pull out the information. If you are accessing it with Firefox 3.1b3+ (plugin installed and configured with your position) you will be prompted for unveiling your location to the website. If you do so it will show you your current position on the map and print out the address. Allow access to the browsers GeoLocation

Showing the GeoLocation of the Browser

To access this information all you need to do is:

    function showMap(position) {
      // Show a map centered at
      // (position.coords.latitude, position.coords.longitude).
    // One-shot position request.

Once this feature is widely available in mobile browsers (I do hope for this summer) my bet is that we will see a whole bunch of websites doing all sort of crazy things with these information. I’m a big Location Based Services (LBS) fan and I can’t wait to see people taking advantage of this.

Update Firefox 3.5.x uses Google’s Geolocation service if no other way can be used. This is halfway accurate. It gathers information about nearby wireless access points and your computer’s IP address. No more plugin needed.

© 2009-2017 Oliver Wehrens Impressum