Geolocation API – Milestone Of Location Tracking

What is Geolocation API?

Geolocation API allows users to access their current location information using simple JavaScript. This is useful in multiple ways like providing route navigation information to users, allowing developers to base their whole website to a particular local language or show products in shopping websites according to user’s location.

A desktop browser uses Wi-Fi or IP Address whereas mobile uses Bluetooth MAC address, radio-frequency identification (RFID), GPS, cell IDs (GSM/CDMA) etc.

Let’s Get Started

Since the Geolocation API fetches user’s current location information, it needs their approval as it can compromise privacy. A point worth noting is that, Geolocation is most accurate for GPS devices.

API is quite simple to use. First we create a geolocation object and then use getCurrentLocation method to access current coordinates. Comments are added for explanation.

Add Google Map library in the header.

<script src=></script>

<div id =‘locate’></div>
var container = document.getElementById(‘locate’),
geolocation = navigator.geolocation;
/*Geolocation Object stored in geolocation var */
function getPosition() {
if(geolocation) {
/*Checking if geolocation API is supported by browser or not.*/
/*getCurrentPosition will return coordinates object to the & showPositionfunction,which is a callback. */
} else {
container.innerHTML = “Oops ! API not supported “;
/*if geolocation API is not supported by the browser,It will show this message. */

/* ShowPosition function outputs the latitude and longitude*/
function showPosition(position){
var lat = position.coords.latitude,
lon = position.coords.longitude;
container.innerHTML = ‘Your position is: ‘ + lat + ‘ , ‘ + lon;


Displaying Users Position in Map

Geolocation API only provides you text based information. To actually see what is your current position in locality or maps, a third party API like Google Map can be of great help.

Add this code at the bottom of showPosition() function.


To hold the map, we need a div,with fixed height and width. Just add below code at the body part.

<div id =‘mapholder’ style = “width:500px;height:500px;”></div>

Here, we’ve passed position.coords to the ShowMap() function.ShowMap() will draw the map in ‘mapholder’ div.

function ShowMap(coords){
var mapOptions={
zoom: 20,
center: new google.maps.LatLng(coords.latitude,coords.longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE,
size : 500*500,
sensor : true
/* mapOptions object will set values for map initialization variable.
* Center: This property will center the map location.For that we * have to pass latitudes and Longitudes.LatLng Object will do this for us.
* mapTypeId: It will specify the type of map we want to * Roadmap,satellite,hybrid,terrain.Currently we’ve used *SATELLITE. */

var mapcontainer = document.getElementById(‘mapholder’);
/* mapholder div will hold our map */
var map = new google.maps.Map(mapcontainer,mapOptions);
/* To create the map ,we have to instantiate Map class,where two parameters are passed.
* 1.mapcontainer : HTML container to hold map,
* 2.mapOptions: options for map */

Geolocation API has many other features like WatchPosition which will update location information as the user moves.

if (geolocation) {
/* watch Position will regularly update as user moves.*/
} else {
container.innerHTML = “Oops ! API not supported “;

To show google maps interactive,just attach this event.

google.maps.event.addDomListener(window , ‘load’ , ShowMap);

In Closing

This is just basic information. A lot can be done with this API. Major browsers supports this API, although there are restrictions in some browsers like:

  • Geolocation API will only work for secured origins such as HTTPs in Chrome 50.
  • Supported for versions above IE 9.0
  • Supported forversions above Firefox 3.5

Geolocation API is simple to use but very powerful. Keep Coding, Keep Exploring.

Leave a comment