¿Cómo obtener la ubicación mediante la IP con javascript y ipstack?

Saber dónde se encuentra tus visitantes web es una ventaja increíble para cualquier sitio web; puedes mostrar contenido relativo como mapas, precios y disponibilidad, generar contenido en su idioma dependiendo de la ubicación, etc. No exagero lo útil que es esta información, por supuesto, tenemos la API de geolocalización de HTML5, pero está basada en permisos y, aunque su servicio cumple su propósito, la ventana emergente de geolocalización del navegador puede dar miedo a los usuarios.


La geolocalización es fundamental para tu aplicación web, la API de geolocalización HTML5 no es lo suficientemente confiable; en su lugar, puedes utilizar como opción principal o secundaria, un servicio de localización basado en la IP como lo es ipstack.

Ventajas

  • ipstack permite 10,000 request gratis mensualmente
  • Solo requieres la dirección IP
  • Te regresa el nombre de país, código del país, región, código postal y más
  • El request es JSON es pequeño, simple y personalizable
  • Entre otros

Usando ipstack

Ipstack es fácil de usar, para obtener información básica sobre una dirección IP solo tienes que hacer una llamada como la siguiente:

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);     

    }

});

La respuesta del API se vería así:

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

Código completo

<!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
1 Comentarios
  • Manu Comentar
    Thursday, August 2, 2018

    Qués es el API Access Key, o cómo lo puedo obtener. ¿Alguna referencia?

    • JoséComentar
      Thursday, August 2, 2018

      Lo puedes obtener en este link https://ipstack.com/

Enviame un comentario