Explore IP Geolocation on an Interactive Map

The Technology Behind IP Geolocation

An IP (Internet Protocol) address is a unique string of characters that identifies a particular device to the network. Your ISP (Internet Service Provider) assigns your device a public IP address so that other devices on the Internet know where to send data like web pages, emails, and search results.

Your ISP also maintains a database of IP addresses and their associated geographic regions (called an IP geolocation database or IP-to-location database.) This can be used to look up an IP address and see what geographic range the IP address falls under.

Accuracy of IP Geolocation Data

A geographic range of geolocation data gives you an approximate location of the user, but it can’t tell you the user’s exact location. IP address lookup is accurate at the country, state, city, and area code level. It can’t give you a street address. It can give you the latitude and longitude of the user, which can be used to show the user’s approximate location on a map.

How to Display an IP Address on a Map

Let’s take a quick look at how to display a user’s location on a map. The process is quite straightforward:

1. Get the user’s IP address
2. Send the IP address to an IP geolocation API
3. The API returns information about the IP address, including the lat and long coordinates
4. Feed those coordinates into the Javascript Maps API
5. The API returns a map object that can be rendered inside a div element

This tutorial assumes some familiarity with Javascript and APIs. If you need help setting up a Javascript project, check out this tutorial.

Get Started With the Geolocation API

Acquire an API Key

Navigate to the API documentation page and click “Start for Free.”

If you’ve never used AbstractAPI before, you’ll be asked to input your email and create an account. Once you’ve logged in, you’ll land on the API’s homepage where you should see your API key.

Use the Key to Send a Request to the API

We’ll use Axios to send a GET request to the AbstractAPI endpoint.

$ npm install axios

Write a function called getUserLocationFromAPI. This will send a request to the API and examine the JSON result.

const apiURL = 'https://ipgeolocation.abstractapi.com/v1/'
 const apiKey = 'YOUR_API_KEY';

... 

 const getUserLocationFromAPI = () => {
   try {
     const response = await axios.get(apiUrl, {api_key: apiKey});
     console.log(response.data);
   } catch (error) {
     setError('Something went wrong getting Geolocation from API!')
   }
 }

You can either send the IP address in question as a third parameter in the options object, or you can simply leave it blank and the API will use the IP address attached to the request header. Since we’ll be sending this request from the frontend of our application, we can leave it blank and the API will automatically detect the IP address from the device that sent the request.

The response data will be a JSON object like this:

{
  "ip_address": "200.68.143.XX", // IP redacted
  "city": null,
  "city_geoname_id": null,
  "region": null,
  "region_iso_code": null,
  "region_geoname_id": null,
  "postal_code": null,
  "country": "",
  "country_code": "",
  "country_geoname_id": 39960XX,
  "country_is_eu": false,
  "continent": "North America",
  "continent_code": "NA",
  "continent_geoname_id": 62551XX,
  "longitude": -121.7714
  "latitude": 37.1835
  "security": {
    "is_vpn": false
  },
  "timezone": {
    "name": "America/XX",
    "abbreviation": "XXX",
    "gmt_offset": X,
    "current_time": "XX:XX:XX",
    "is_dst": true
  },
  "flag": {
    "emoji": "XXX",
    "unicode": "U+XXXX U+XXXX",
    "png": "https://static.abstractapi.com/country-flags/XX.png",
    "svg": "https://static.abstractapi.com/country-flags/XX.svg"
  },
  "currency": {
    "currency_name": "XX",
    "currency_code": "XXX"
  },
  "connection": {
    "autonomous_system_number": 284XX,
    "autonomous_system_organization": "XXXX",
    "connection_type": "Cellular",
    "isp_name": "XXXX",
    "organization_name": "XXXX"
  }
}

Pull the latitude and longitude out so we can display those to the user on the map.

 "longitude": -121.7714
  "latitude": 37.1835

Get Started With the Maps API

The Google Maps Javascript API requires a bit more setup. You’ll first need to set up a Google Cloud Project. Then you can get an API key for the Maps API and load the Maps SDK into your project.

Set Up Your Cloud Project

More detailed instructions can be found here.

Go to the Google Cloud Console and create a new project. Fill out the required information and click “Create.”

To deploy your app, you must enable billing. This doesn’t mean you will be charged - the API gives you a $200/month credit, so as long as you stay within that limit, it should be free to use.

Enable the API you want to use. In this case, it is the Maps Javascript API.

Get an API Key

Once you have set up your Cloud Project and enabled the Maps API, you can get an API key that you will use to send requests.

To create an API key, go to the Keys & Credentials page and create a new API key for the project.

Load the API Into Your Project

There are three ways you can load the API into your project: dynamic library loading, downloading the NPM js-api-loader package, or using a script tag. We’ll use the NPM package.

npm install @googlemaps/js-api-loader

Once you have the package installed, create a loader instance in the index.js file. This will be what we use to load the map object.

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

Use the Maps API

Once you have created a loader, you can use it to generate a new Map object, using the lat and long coordinates you got from the AbstractAPI Geolocation API.

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -121.7714, lng: 37.1835 },
    zoom: 8,
  });
});

This will generate a map with its center at the lat and long coordinates provided.

Render a Map

To show this map to the user, simply push it into a div element with an id of “map” in your HTML code.

<div id="map"></div>

Benefits of Using IP Geolocation

There are many benefits to using an IP geolocation service beyond simply showing a map to the user. IP lookup tools like IP2Location, WhoIs, IpInfo, MaxMind, IP Location Finder, and AbstractAPI can be used to improve user experience in e-commerce and many other areas.

Applications in Business and Security

Knowing the user’s physical location allows you to serve localized content such as language translation, currency conversions, and tailored advertisements that send users deals available in their area, or direct them to a specific brick-and-mortar store.

Additionally, IP location lookup can be used to protect users. You can compare the location of an incoming request to the user’s recorded address to make sure the request is coming from that user and prevent fraud.

You can also use IP geolocation to block incoming requests from countries with known bad actors, protecting your site and your users from spam, hackers, and other fraudsters.

Conclusion

Using IP geolocation information is a great way to improve a user’s experience on your site: serve localized content, prevent fraud, run targeted ads, or show the user their location on a map. It can also be used to better secure your site, prevent fraud, and protect your users’ valuable data.

FAQs

How can users control their geolocation data?

Users can manage location tracking through browser settings, opt-out mechanisms, privacy tools, and even legislation. However, completely controlling it can be challenging.

How precise is IP geolocation in rural areas?

IP geolocation accuracy drops in rural areas due to shared IP addresses, limited data, and mobile device movement. Alternative methods like GPS may be more suitable for precise location tracking in these cases.

What besides location can IP geolocation reveal?

IP geolocation can infer demographics, internet usage patterns, and aid in fraud detection. However, responsible use and respect for user privacy are crucial when utilizing these insights.