How to Get User Location with HTML5 Geolocation API

In many cases, obtaining user location would be extremely useful to establish better user experience, for example:

• E-commerce sites can immediately provide shipping cost estimation and inform product availability from local retailers
• News sites can provide localized headlines and weather report.
• Daily deal sites can provide offers and discounts available from user’s local stores or restaurants.
• Movie sites can listed the ‘Now Playing’ movies in nearby theatres, etc

In the past, to retrieve user location, we might need to provide a list of locations for users to opt-in, or rely on the device IP address to make a rough estimation of their location. Today, we can do this job in a much leaner way with less complexity using Geolocation API.

The Geolocation API is a new technology that’s introduced by W3C – the same organization behind HTML5. Probably for that reason, it is often correlated and grouped with HTML5 in many books and references, although it has actually nothing to do with HTML5 technically.

• View Demo

In this post, we are going to use the API in its simplest form; we will create a set of functions to retrieve user’s location and show it in map with Google Maps. Let’s take a look.

Creating the Map with Google Maps API

First, we will use Google Maps API with a function called GoogleMap to specify the map. In the following JavaScript codes, we will get the location by specifying it with the following two Geolocation objects: coords.latitude and coords.longitude, which retrieve the Latitude and Longitude coordinates.

Then, we set up the map and the location marker accordingly with google.maps.Map and google.maps.Marker, as follows.

function GoogleMap(position) {
  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
  });
  var marker = new google.maps.Marker({
    map: map,
    position: location,
    animation: google.maps.Animation.DROP,
    title: "This is your location"
  });
  map.setCenter(location);
}

For more implementation on the Google Maps API, you can head over to the Google Maps JavaScript API v3 documentation.

Error Report

Then, we create a function for the error report when the location cannot be retrieved. In this case, we will show an alert window saying “Location can’t be found”.

function showError() {
  alert("Location can't be found");
}

Running Geolocation

The Geolocation API is quite simple. It specifies with the navigator.geolocation object, as you can see from the following code.

 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(GoogleMap, showError);
 }
 else {
 alert("Your browser does not support Geolocation.");
 }
 

In the above code, we will first run a test whether the user’s device has support for Geolocation API. If it returns “no” we will show an alert window showing that “The browser does not support Geolocation”. If it does, we will try to retrieve the location using the getCurrentPosition method.

When the location coordinate has been retrieved, it will send the data to GoogleMap function, to show in the map. If the location cannot be located, the showError function will be executed instead.

User Privacy

Since this is a matter of user privacy, users have to be aware that the device or the Web they are visiting will be tracking their location. As W3C has stated in the documentation:

User agents must not send location information to Web sites without the express permission of the user.

For this reason, the browser will first prompt the users whether they Allow or Deny for the browser to track their location information.

Result Accuracy

The result accuracy depends on many factors such as:

• The user’s location
• The availability of data sources – such as wireless access points and IP Address
• The device itself

In the following screenshot I tested the above code in my Macbook and iPhone. It turns out that the iPhone shows a more accurate location than one at my MacBook, as it is equipped with GPS hardware.

Further references

As we mentioned, we just did a simple thing with Geolocation, but the actual potential is so much more than that. There are many more ideas we can implement with the API. So, if you are keen to dig into this subject further, you can head over to the following sources:

• Geolocation API Specification – W3C
• You are here (and so everybody else) – Dive into HTML5
• Location-Aware Browsing – Firefox
• Getting Started with HTML5 Geolocation – Net Magazine
• 12 Cool HTML5 Geolocation Ideas – MSDN

Lastly, head over to the demo page to see how it is in action.

• View Demo
• Download Source