All modern browsers are capable of detecting their own location either by GPS, WiFi or ip addresses. Geolocation is much more accurate for modern devices with GPS, like iPhone and Android.

In this post we’re going to see some easy and pure javascript code for detecting geolocation without depending on any third party library or services. So let’s get started.

Location Sources

1. GPS : Very accurate up to 10 meters. Every Android and iPhone devices has that device inbuilt.
2. WiFi : Very accurate up to 0 – 10-15 meters.
3. Mobile Network : Accuracy lies between ~1300 meters to ~3000 meters. Depends on the carrier tower location.

Geolocation tries to get current location using any of these resources and their availability also connectivity. WiFi are used quicker than GPS resources as GPS takes some time to connect depending on the availability.

Using Geolocation

Geolocation API supportable by all modern browsers. Its a good practice to check its availability using browser’s navigator object.

Example

if(navigator.geolocation){
console.log('Geo location is supported')
}else{
console.log('Geo Location is not supported')
}

If your browser supports geolocation it will log success message "Geo location is supported".

Minimum Requirement

Chrome Firefox Safari Opera Explorer 5.0* 3.5 5.0 16.0 9.0

navigator.geolocation has all the methods for API.

1. getCurrentPosition: function() { /* ... */}
2. watchPosition: function() { /* ... */}
3. clearWatch: function() { /* ... */}

getCurrentPosition()

The Geolocation.getCurrentPosition() method is used to get the current position of the device.

Syntax

navigator.geolocation.getCurrentPosition(success[, error[, options]])

Example

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};


navigator.geolocation.getCurrentPosition(success, error, options);

watchPosition()

The Geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function. This method returns a watch ID value then can be used to unregister the handler by passing it to the Geolocation.clearWatch() method.

Syntax

id = navigator.geolocation.watchPosition(success[, error[, options]])

Example

var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log('Congratulations, you reached your target');
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
}

target = {
  latitude : 0,
  longitude: 0
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

id = navigator.geolocation.watchPosition(success, error, options);

A simple Fiddle which shows current latitude and longitude.