How to Build Location Intelligence with IP Geolocation (in JavaScript)

Have you ever wondered how e-commerce websites display merchandise prices in your local currency? This is possible because they get the location details from the incoming request your browser sends. The Telize API integrates well with your web applications and provides location-specific information about the visitor.

Overview of the Telize API

The Telize API is a handy tool to incorporate geolocation tracking features for your web and mobile apps.

Many web applications rely on the location information of a user to provide targeted and personalized services. For example, an e-commerce portal may recommend a visit to a physical store near you if an item you show interest in is not available online. Behind the scenes, the portal app detects your location to recommend the nearest physical store location.

In this blog post, we create a simple web page to demonstrate the handling of Telize API from within the JavaScript code embedded in the HTML.

How to Get Access to the Telize API

1. Signup for RapidAPI Account

To begin using the Telize API, you’ll first need to sign up for a free RapidAPI developer account.

RapidAPI is the world’s largest API marketplace, with over 10,000 APIs and a community of over 1,000,000 developers. Our goal is to help developers find and connect to APIs to help them build amazing apps.

2. Navigate to Telize API Console

You can search for “Telize API” or alternatively you can access the API Console directly.

3. Subscribe to Telize API

Once you are in the API console, click on the “Pricing” tab to take a look at the subscription tiers available for Telize API.

The Telize API has a paid subscription. You can opt for the BASIC subscription tier at $7. It gives you 1000 API requests per day.

How to use the Telize API

The Telize API has a set of endpoints that can retrieve either the IP address or the location information, or both.

Take a look at the endpoint listing in the API console page of the Telize API.

Note: This API can be tested only from within the JavaScript code of the web page. Triggering it through the API console will return an error response.

Let’s do a quick round-up of the endpoints.

GET JSON IP

The “GET JSON IP” returns the IP address in a JSON format.

{
    “Ip”: <IP_ADDRESS>
}

The <IP_ADDRESS> value, in this case, is the actual IP address of the device from where the API is triggered.

GET IP

The “GET IP” endpoint is the same as “GET JSON IP” except for the format of API response. Unlike “GET JSON IP”, the “GET IP” returns the IP address in plain text without additional formatting.

GET Location

The “GET Location” endpoint returns the location details of a user in JSON format.

Here is a sample output from the API when it is triggered by a device located in Holland, Europe.

{
 "ip":"193.0.6.139"
 "continent_code":"EU"
 "country":"Netherlands"
 "country_code":"NL"
 "country_code3":"NLD"
 "region":"North Holland"
 "region_code":"NH"
 "city":"Amsterdam"
 "postal_code":"1012"
 "latitude":52.3735
 "longitude":4.8951
 "timezone":"Europe/Amsterdam"
 "offset":3600
 "asn":3333
 "organization":"Reseaux IP Europeens Network Coordination Centre (RIPE NCC)"
}

The significance of each JSON field is as follows.

GET Location with specific IP

The “GET Location with specific IP” is handy when detecting the location of any arbitrary IP address. For a given IP address as an input, it returns a JSON object with the location details of that IP address.

Here is a sample output from the API when it is triggered for a random IP address “1.11.23.45”.

{
  continent_code: "AS"
  country: "South Korea"
  country_code: "KR"
  country_code3: "KOR"
  ip: "1.11.23.45"
  latitude: 37.5112
  longitude: 126.9741
  offset: 32400
  timezone: "Asia/Seoul"
}

The JSON fields have the same significance as the response of “GET Location”, except that it does not contain some of the more granular details such as region and postal code information.

Building a Location Finder Web Page with the Telize API

Let’s use Telize API to build an IP geolocation aware application. You may have heard of — or used — a popular website for finding your IP address called https://whatismyipaddress.com/. Let’s build a similar web application for detecting a visitor’s current location.

The idea is to use Google Maps to pin a balloon on a visitor’s location.

Follow along with the steps below to build the web page.

1. Define the HTML Skeleton for the Web Page

We start with a skeleton web page.

<!DOCTYPE html>
<html>
   
   <head>
       <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
        <script src = "https://maps.googleapis.com/maps/api/js"></script>
            
   </head>
   
   <body>
   </body>
   
</html>

Pay attention to the <script> tag declarations inside the <head> tag. The first <script> tag imports the JQuery library. The second <script> tag imports the Google Maps API.

2. Initialize Google Maps with Telize API

Let’s load Google Maps by adding JavaScript code. We can do this inside a new <script> tag as follows.

<script>

      var settings = {
       "async": false,
       "crossDomain": true,
       "url": "https://telize-v1.p.rapidapi.com/location",
       "method": "GET",
       "headers": {
    "x-rapidapi-host": "telize-v1.p.rapidapi.com",
    "x-rapidapi-key": "<YOUR_RAPIDAPI_KEY>"
       }
  }

  function loadMap() {
      
        var lat;
        var long;

        $.ajax(settings).done(function (response) {
           		lat = response.latitude;
           		long = response.longitude;
        });

        var mapOptions = {
        
            center:new google.maps.LatLng(lat, long),
            zoom:7,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true

        }
          
        var map = new google.maps.Map(document.getElementById("map"),mapOptions);
              
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, long),
            map: map,
        });

  }
       
      </script>

We then define the JQuery AJAX call setting for invoking Telize API’s “GET Location” endpoint. Don’t forget to replace the <YOUR_RAPIDAPI_KEY> placeholder with your RapidAPI subscription key.

You can get the code snippet for the JQuery API call from the API console.

Next, we define a loadMap() function to initialize the Google Maps with the location defined by the latitude and longitude, obtained from the Telize API. Finally we place the balloon marker on the location’s coordinate.

3. Display Google Maps On Web Page

We are nearly done, except for displaying the content of the webpage. Add the following code inside the <body> tag.

<h1>What Is My Location?</h1>
<div id = "map" style = "width:580px; height:400px;"></div>

Here we define an H1 tag to mark the heading for the page. Afterward, we define an <div> element which acts as a container for Google Maps.

4. Define onLoad event To Load Google Maps

The last thing we need to do is to add an onload DOM event on the <body> tag to invoke loadMap() function we defined in the previous step.

<body onload = "loadMap()">

5. Testing The Web Page

It’s time to test the web page. But before we do that, here is the final HTML code for the page.

<!DOCTYPE html>
<html>
   <head>
   	<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      <script>
      	  var settings = {
        "async": false,
        "crossDomain": true,
        "url": "https://telize-v1.p.rapidapi.com/location",
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "telize-v1.p.rapidapi.com",
          "x-rapidapi-key":  "<YOUR_RAPIDAPI_KEY>"
        }
      }

          function loadMap() {
        
      var lat;
      var long;

           	$.ajax(settings).done(function (response) {
           		lat = response.latitude;
           		long = response.longitude;
           	});

              var mapOptions = {
                  
                  center:new google.maps.LatLng(lat, long),
                  zoom:7,
                  mapTypeId:google.maps.MapTypeId.ROADMAP,
               	    disableDefaultUI: true

              }
          
              var map = new google.maps.Map(document.getElementById("map"),mapOptions);
              
              var marker = new google.maps.Marker({

                 position: new google.maps.LatLng(lat, long),
                 map: map,

              });

          }
       
      </script>      
   </head>   
   <body onload = "loadMap()">
      <h1>What Is My Location?</h1>
      <div id = "map" style = "width:580px; height:400px;"></div>
   </body>   
</html>

Replace the placeholder <YOUR_RAPIDAPI_KEY> with your RapidAPI subscription key, and save this as a .html file.

Open it on a browser and you can see your location pointed on Google Maps. This is what you see if you are located around New York.

Ignore the Alert popup and the overlay message “For development purposes only”. This is displayed since we are using the basic version of Google Maps. The output will change based on your location, as detected by Telize API.

Conclusion

That’s a wrap on the Telize API. Use cases of geolocation tracking are abundant. A number of industries such as telecom, retail, real estate and manufacturing use IP geolocation tracking. With this API, you can build geolocation aware mobile and web apps.

Related: How to Use IP Geolocation with Python

If you are looking for more options then check out our Location API category. Good luck and we are here to help, should you face any issues with accessing the APIs via RapidAPI.