How to get the location through the IP with JavaScript and with ipstack?

Where from your web users are is an incredible advantage for any website; You can show relative content such as maps, prices and availability, generate content in your language depending on the location, etc. I cannot overstate how useful that information is, of course, we have the HTML5 geolocation API, but it is based on permissions and although its service serves its purpose, the browser's geolocation pop-up window can scare users.


The geolocation is essential for your web application, the HTML5 geolocation API is not reliable enough; instead, you can use as a option, a location service based on IP with ipstack.

Advantage

  • ipstack allows 10,000 free requests per month
  • You only need the IP address
  • Returns the country name, country code, region, zip code and more
  • The request is JSON is small, simple and customizable
  • Among others

Using ipstack

Ipstack is easy to use, to get basic information about an IP address you just have to make a call like the following:

var ip = ' 201.144.237.145’

var access_key = 'YOUR_ACCESS_KEY';

// get the API result via jQuery.ajax

$.ajax({

    url: 'http://api.ipstack.com/' + ip + '?access_key=' + access_key,  

    dataType: 'jsonp',

    success: function(json) {

        alert(json.location.capital);     

    }

});

The API response would look like this:

ip	"201.144.237.145"
type	"ipv4"
continent_code	"NA"
continent_name	"North America"
country_code	"MX"
country_name	"Mexico"
region_code	"CMX"
region_name	"Mexico City"
city	"Mexico City"
zip	"63009"
latitude	19.4342
longitude	-99.1386
location	
geoname_id	3530597
capital	"Mexico City"
languages	
0	
code	"es"
name	"Spanish"
native	"Español"
country_flag	"http://assets.ipstack.com/flags/mx.svg"
country_flag_emoji	"????"
country_flag_emoji_unicode	"U+1F1F2 U+1F1FD"
calling_code	"52"
is_eu	false

Complete code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <span></span>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var ip = '134.201.250.155'
        var access_key = 'YOUR_ACCESS_KEY';

        // get the API result via jQuery.ajax
        $.ajax({
            url: 'http://api.ipstack.com/' + ip + '?access_key=' + access_key,
            dataType: 'json',
            success: function (json) {

                // output the "capital" object inside "location"
                $("span").text(json.location);
                alert(json.location.capital);

            }
        });
    </script>
</body>
</html>

 

Artículos relacionados
How to validate that the password that your users capture is strength with jQuery?
How to validate that the password that your users capture is strength with jQuery?

In this post, I show to you how to validate an

How to add, edit and delete html fields dynamically using JQuery
How to add, edit and delete html fields dynamically using JQuery

In this post we will see how to add and delete

Cómo validar tarjeta de crédito o débito en asp.net con JavaScript y jQuery
Cómo validar tarjeta de crédito o débito en asp.net con JavaScript y jQuery

En este ejemplo veremos cómo validar mediante

0 Comentarios
Enviame un comentario