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

obtener la ubicacion mediante javascript

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>