Many applications like weather, maps, networking, and social media apps need to get their visitors' IP addresses and location data to function. These applications rely on IP and Geolocation APIs to do so, and this guide will show how you can use them in your projects.
Have you ever wondered how a website already knows your country, currency, and language when you visit it? They do so by using one of the many IP and Geolocation APIs out there. These APIs identify the real-world geographic location of an internet-connected computer using its IP address. So, if you integrate these APIs in your application, they will get the geolocation data of your visitors.
There are numerous use cases for IP Geolocation when you need to know where your audience is coming from. These include:
It is worth noting that IP addresses don't give the users' precise location, but they are accurate enough for regular uses like above.
Let's jump in and see how we can use an API to get visitors' IP and location in our applications.
Let’s find an IP Geolocation API first. RapidAPI Hub lets you choose from thousands of public APIs for use in your projects. So, head over to RapidAPI Hub and create an account if you haven’t already. Then, search for "IP" or "Geolocation" in the search section.
You will see that we have a lot of APIs to choose from. For our app, I am going to use the IP Geo Location API. To use this API, you need to subscribe to it first. You can do this by clicking on the Subscribe to Test button.
Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. We are going to subscribe to the free plan for this guide.
Once subscribed, you will be back on the Endpoints page. In the central section, you should see a field named x-rapidapi-key
. You can use this key to query the API now.
Take a look at the two endpoints of the API. The IP Lookup endpoint takes any IP address and returns its geolocation data while the Visitor Lookup one gets the location data of the visitor(client). You can see these endpoints in the left pane of the image below.
We will use the Visitor Lookup endpoint to get the IP and location of our application's visitors. We can use the automatically generated code snippets (you can see them in the image above) to formulate our API request. Here is what the request will look like in JavaScript code using Axios:
js
import axios from 'axios';async function getResponse() {const options = {method: 'GET',url: 'https://ip-geo-location.p.rapidapi.com/ip/check',params: {format: 'json'},headers: {'x-rapidapi-host': 'ip-geo-location.p.rapidapi.com','x-rapidapi-key': YOUR_RAPIDAPI_KEY}};try {let response = await axios(options);console.log(response.data);// Do something with the response} catch (error) {console.error(error);}}
You can also use Fetch to send the request, like this:
js
async function getResponse() {const response = await fetch('https://carbonfootprint1.p.rapidapi.com/CarbonFootprintFromCarTravel?distance=100&vehicle=SmallDieselCar',{method: 'GET',headers: {'x-rapidapi-host': 'carbonfootprint1.p.rapidapi.com','x-rapidapi-key': YOUR_RAPIDAPI_KEY}});const data = await response.json();console.log(data);}
Don't forget to replace YOUR_RAPIDAPI_KEY
with your key in the x-rapidapi-key
field. If you are using React, you can call this function in the useEffect
hook to get the data whenever a visitor visits your application.
js
useEffect(() => {getResponse(); // Get IP and Location data whenever the page (component) loads.}, []);
We are all set now. Try sending the request, and you will receive detailed information about IP and Location. In my case, it looks like this:
json
{"ip": "13.228.169.5","success": true,"type": "IPv4","continent": "Asia","continent_code": "AS","country": "Singapore","country_code": "SG","country_flag": "https://cdn.ipwhois.io/flags/sg.svg","country_capital": "Singapur","country_phone": "+65","country_neighbours": "","region": "Central Singapore","city": "Singapore","latitude": 1.3553794,"longitude": 103.8677444,"asn": "AS16509","org": "Amazon Data Services Singapore","isp": "Amazon.com, Inc.","timezone": "Asia/Singapore","timezone_name": "Singapore Standard Time","timezone_dstOffset": 0,"timezone_gmtOffset": 28800,"timezone_gmt": "GMT +8:00","currency": "Singapore Dollar","currency_code": "SGD","currency_symbol": "$","currency_rates": 1.361,"currency_plural": "Singapore dollars","completed_requests": 1}
That's all. Go ahead and add visitor tracking and geolocation features to your applications.