How to do IP Geolocation in jQuery

Last Updated Jan 24, 2021

Engineer, maker, Google alumna, CMU grad

Heading

Geolocating a visitor who reached your web pages directly from his browser is required when, for example, you need to display the prices of your products in his local currency, display a version of your content translated into his language, or display ads localized in his geographical area.

There are two main ways to geolocalize a visitor: browser-based geolocation and IP address-based geolocation.

How browser-based geolocation works

The navigator.geolocation javascript APIs of modern browsers make it possible to obtain the precise location. It is widely available and uses the device's GPS location, the GSM antennas' information, or information related to the network stack (IP address, MAC address).

It is easy to use in jQuery:


function get_location(location) {
  var loc_info = "Your location details :\n";
  loc_info += "Latitude: "+location.coords.latitude +"\n";
  loc_info += "Longitude: "+location.coords.longitude+"\n";
  console.log(loc_info);
}

if(navigator.geolocation)
  navigator.geolocation.getCurrentPosition(get_location);

The major disadvantage of browser-based geolocation is that it will ask the user to share his location information with your scripts. This will certainly spoil the user experience because of an annoying pop-up. If the visitor refuses to share his location, then your script will not get any location information.

Also, you should note that geolocation API will only work over HTTPS. Hence you may have difficulties when testing it over your local development server.

How IP address geolocation works

An IP address identifies each device connected to the Internet. IANA is the body in charge of distributing these addresses between each continent and then passing responsibility to other organizations to distribute countries' addresses. Here is the list of those organizations:

AFRINIC for Africa Region
APNIC for Asia/Pacific Region
ARIN for Canada, USA, and some Caribbean Islands
LACNIC for Latin America and some Caribbean Islands
RIPE NCC for Europe, the Middle East, and Central Asia

Therefore, a geolocation service can use these organizations' data to find out in which country your visitors reside.

To obtain accurate location information at the level of regions, cities, and precise GPS coordinates, it will then be necessary to get databases from Internet service providers, as they are responsible for distributing IP addresses within a country.

The advantage of such a method is that it does not require any authorization from the visitor. The two disadvantages are that it is difficult and time-consuming to set up the IP address distribution database by oneself and keep it updated. Secondly, it is impossible to obtain the visitor's IP address directly in jQuery, just like in JavaScript, without an AJAX call to a server that can determine and return this address.

Don't reinvent the wheel.
Abstract's APIs are production-ready now.

Abstract's suite of API's are built to save you time. You don't need to be an expert in email validation, IP geolocation, etc. Just focus on writing code that's actually valuable for your app or business, and we'll handle the rest.

Get started for free

Geolocation in jQuery: using an API

The most practical solution is to use an API through an AJAX call to obtain the visitor's IP address and his geographical location.

Abstract provides the free IP Geolocation API that is fast and accurate. All you have to do is create an account, which does not require a credit card, to get your private API key. Here's how to use it in jQuery:


let api_key = "the_key_you_get_from_your_account";
$.getJSON("https://ipgeolocation.abstractapi.com/v1/?api_key=" + api_key, function(data) {
  var loc_info = "Your location details :\n";
  loc_info += "Latitude: "+data.latitude +"\n";
  loc_info += "Longitude: "+data.longitude+"\n";
  loc_info += "Timezone: GMT"+data.gmt_offset+"\n";
  loc_info += "Country: "+data.country+"\n";
  loc_info += "Region: "+data.region+"\n";
  loc_info += "City: "+data.city+"\n";
  console.log(loc_info);
})

Abstract makes IP geolocation in jQuery simple.

Get started for free

How to do IP Geolocation in jQuery

Table of Contents:

Heading

How browser-based geolocation works

How IP address geolocation works

Geolocation in jQuery: using an API

Related Articles

Top 6 Best Sentiment Analysis APIs for Determining the Mood of Your Users

Laravel Email Validation Guide: Methods & Code Examples

How to Validate Email Addresses with PHP and Regular Expressions

How to get an IP address using PHP

How can I do an SMTP and MX check?

Angular.js: Get IP Address

Let's send your first API call.