GeoLocation in HTML 5 – See how

Geolocation with html 5One of the most interesting new features in HTML 5, is the possibility automatically position the users browser, based on GeoLocation.

The principle of trying to detect the users location isn’t new. Many websites has been using IP addresses to identify where the users are located, however these IP addresses often belongs to the users ISP, which isn’t necessary very accurate.

In this post you’ll learn a few basics on GeoLocation with HTML5, and see an example on how accurate the new GeoLocation is. 

The principles behind GeoLocation

There are multiple sources that are used to determine the location in the GeoLocation API:

  • Global Positioning System (GPS)
  • IP address
  • RFID
  • WiFi
  • Bluetooth MAC addresses
  • GSM/CDMA cell IDs
  • User input

Based on these sources – a pretty good localization can normally be made.

Compatible browsers

Unfortunately not all browsers are supporting HTML 5 yet. This is a list of the HTML 5 and GeoLocation status of the most common browsers:

Internet Explorer: not supported

Mozilla Firefox 3.5+: supported

Safari: Not supported by desktop version, but supported by mobile version

Chrome: Not directly supported, but indirectly supported through Gears API

Android: Supports GeoLocation through Gears API

GeoLocation example

In this example provided by you can see how accurate the GeoLocation positioning is.

Please notice that positioning is only possible, if you as a user allows the browser to send position data to the website. To make the example below work, you need a html 5 compatible browser, and you need to answer “Yes” to the security alert in your browser:

After you have allowed the browser to see your location, the map below should be updated to display your current location, as  reported by your browser.

What are the perspectives

Knowing the position of the user can be very practical in many applications. A local search site could automatically look up data from the users neighborhood when the user enters the site, or a  classified site could automatically rank items by distance to the user.

However the most interesting perspectives are within mobile devices. First due to the fact, that the main mobile browsers already supports GeoLocation, and secondly because the mobile user is typically on the move, where suggesting nearby stuff is highly relevant.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

One Reply to GeoLocation in HTML 5 – See how

  1. Usefull information.

Comments are now closed for this article.