How to geolocate an IP address in JavaScript

You would have definitely noticed how e-commerce platforms and many other websites provide filtered and targeted information to their visitors based on their location. Applications of such customization mechanism are, for example, displaying product prices in the local currency or offering directions to the most convenient physical store.This blog post will guide you to efficiently implement Geolocation from your visitors’ IP address using JavaScript.

This blog post will guide you to efficiently implement Geolocation from your visitors’ IP address using JavaScript.

Geo-locating a visitor using JavaScript’s Geolocation library

To get details about the geographical position of a client, you have to use Geolocation libraries of JavaScript.

Geolocation libraries may or may not be available on the client’s web browser. The geolocation method of the navigator object returns a boolean indicating whether the browser supports or not geolocation. A simple test is enough:

if ( navigator.geolocation ) {
  // geolocation is supported
} else {
  // geolocation is not supported
}

To obtain the user's current location, you can call the navigator.geolocation.getCurrentPosition() method, which takes from one to three parameters:

• a callback that is executed when the geolocation succeeded
• a callback that is executed in case of error
• a PositionOptions object which has three optional properties: enableHighAccuracy, timeout, and maximumAge

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  {
    enableHighAccuracy : true,
    timeout : 2000,
    maximumAge : 10000
  }
);

Here is the explanation of the properties for the third parameter:

• enableHighAccuracy is a precision indicator. If set to true, the geolocation method will be the most accurate, but it will be slower.
• timeout is the time in milliseconds after which the position search is stopped, and the error callback function is called.
• maximumAge is related to cache's use, and is expressing the time in milliseconds below which, if a position search has already been done, a new position search is not repeated.

When geolocation succeeds, the first callback is called. This function takes as a parameter a GeolocationPosition object that encapsulates the geolocation information:

• position.coords.altitude returns the altitude
• position.coords.longitude returns the longitude

Here is a full implementation:

var showLocation = function(position) {
  console.log('Longitude ' + position.coords.longitude);
  console.log('Latitude ' + position.coords.latitude);
}

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showLocation);
}

‍