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.
“asn” | Autonomous System Number internally generated by API |
“city” | Name of the city |
“continent_code” | Two-letter continent code |
“country” | Name of the country |
“country_code” | Two-letter ISO 3166-1 alpha-2 country code |
“country_code3” | Three-letter ISO 3166-1 alpha-3 country code |
“ip” | Visitor IP address |
“latitude” | Latitude |
“longitude” | Longitude |
“offset” | UTC time offset in seconds |
“organization” | Organization name of the ISP |
“postal_code” | Postal code / Zip code |
“region” | Name of the region |
“region_code” | Two-letter ISO-3166-2 state / region code |
“timezone” | Time Zone |
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.
Djblackie says
I love this
Rafia yaqoob says
I like it
Zahid Hussain says
Its wonderful 🙂
I really like it
Zahid Hussain says
Its fruitful information 🙂
Nomi Khokhar says
Ya , it’s fruitful information
Akeem says
this is really an interesting information. i love programming
Chino Jay Jaro says
i like it
Rehman Haider Khan says
Good
Safir Gilani says
Really won
sheku Kanu says
It educating
Bryan iribal says
I can learn a lot with in this app
Henry says
This is good to anyone .. it’s amazing
RapidAPI Staff says
Thanks Henry!
Muhammad Haider says
Nice info.
MD NASIMUL HAQUE says
Good hope
armouros says
Bien
Robin says
Good
Emily Jones says
Loved it
Eric James says
This is really nice
Chino Jay Jaro says
Nice
Whitney says
Fine
Yohanis says
Wow its so nice
RapidAPI Staff says
Thanks!
Ajeng says
Good
Syahrul efendu says
Good
HSK says
Nice information
Zineddine Hadjoudja says
Very good
Syed Aun Muhammad says
This is very useful information.
Syed Aun Muhammad says
This is very useful information & blog looks interesting.
Ripan das says
Good
Miracle says
Thanks
Ikhsan Nasir says
Good
Kushal says
Really good
Kushal says
Thanks
Hyunyves says
Amazing
Muhtar Budiman says
Good
Rachmat says
Good
Vinzen says
Nice job
Pun says
Good
Puput says
Nice Try
Mahmoud Essam says
Good
Emmanuel Success says
Good
Emmanuel Success says
Okay thanks
Jennifer Urmanita says
Thanks
Ida wati says
Thanks
Fauzirahmat says
Thanks
Saberayoub says
Very good
Tomar says
😱😱😱😱
Eslam says
Nice
Jumaa K Almehairbi says
GOOD
Saad__0 says
Nice
Ahmed says
Nice
Imad says
I like thèse
Very good