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. 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.

Why 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 (like Disdus, Woot) can provide offers and discounts available from user’s local stores or restaurants.
  • Movie sites can listed the ‘Now Playing’ movies in nearby theaters, etc

Find Location With HTML5 Geolocation API
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.

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 andgoogle.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"

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

view demo

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 Geo-location API. If it returns “no” we will show an alert window showing that “The browser does not support Geo-location”. If it does, we will try to retrieve the location using thegetCurrentPosition method.

When the location coordinate has been retrieved, it will send the data to GoogleMapfunction, 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 Mac-book 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.


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:

If you have any more suggestions to be added, feel free to comment below. Thanks for reading and looking forward to read your thoughts!

view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!DhirajHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,animation delay,animation direction,configurable settings,core code,CSS framework,Device Location,doctype html,enterprise-it,free open source,gaming,geolocation,Geolocation API,Google Map API,Google maps javascript API,GoogleMap,graphical user interface,grid,grid system,html5,html5 geolocation,interactive web applications,IP Location,IP track,javascript,javascript functions,jquery,location,mobile,open source javascript,page elements,technology,transparent background image,User Location,visual transitionThe 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. In this post, we are going...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.