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:
CODE TO BE DISPLAYED ON PAGE GOES HERE
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);
}
The disadvantages of using JavaScript’s Geolocation library
For obvious reasons of confidentiality, the browser will not communicate geographical coordinates to your scripts without the user’s explicit consent. A call to getCurrentPosition() will necessarily provoke a warning message for the user. This can be seen as an annoyance by the user and prevent you from getting the data you need.
Since 2016-2017 most web browsers require to use the HTTPS protocol to access geolocation, which won’t be available if you do your tests locally and for classic HTTP websites.
Geolocation may not be available on every web browser.
By default, getCurrentPosition() tries to respond as quickly as possible even if the result is not very accurate. Depending on the level of detail you expect, this may be an issue.
Geo-locating a visitor using Abstract API
Abstract provides a convenient way to obtain location details of an IP address through the IP Geolocation API. Calling Abstract API can be done from any web browser, without annoying the user with a warning message, and with a high accuracy level.
Similar to most API resource providers, you will first need to get an API key. At Abstract, this process is extremely simplified, as you only need to create an account (no credit card needed), then your API key is automatically generated. The key is included in the code snippets within the documentation pages, so using it is as simple as copy-paste.
Here is how to call IP Geolocation API from JavaScript:
var api_key = "abc123"; // Api key obtained from your account page
var url = `https://ipgeolocation.abstractapi.com/v1/?api_key=${api_key}`;
function httpGetAsync(url, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", url, true); // true for asynchronous
xmlHttp.send(null);
}
function showLocation(data) {
console.log(data);
}
httpGetAsync(url, showLocation)
Here is an example of the output for an IP address located in France:
{
"ip": "92.184.105.98",
"city": "Caen",
"city_geoname_id": 3029241,
"region": "Normandie",
"region_iso_code": "FR-NOR",
"region_geoname_id": 11071621,
"postal_code": "14949",
"country": "France",
"country_code": "FR",
"country_geoname_id": 3017382,
"country_is_eu": true,
"continent": "Europe",
"continent_code": "EU",
"continent_geoname_id": 6255148,
"longitude": 49.185850,
"latitude": -0.359120,
"security": {
"is_vpn": false
},
"timezone": {
"name": "Central European Time",
"abbreviation": "CET",
"gmt_offset": "+1",
"current_time": "2020-03-29T07:35:08-07:00",
"is_dst": true
},
"flag": {
"emoji": "🇫🇷",
"unicode": "U+1F1EB U+1F1F7",
"svg": "https://static.abstractapi.com/country-flags/fr_flag.svg",
"png": "https://static.abstractapi.com/country-flags/fr_flag.png"
},
"connection": {
"autonomous_system_number": "AS3215",
"autonomous_system_organization": "France Telecom - Orange, FR",
"connection_type": "wireless",
"isp_name": "Orange S.A.",
"organization_name": "Internet OM"
}
}
Get your free
IP Geolocation
key now
See why the best developers build on Abstract
get started for free
