javascript - google - Obtener el nombre de la ciudad utilizando la geolocalización

geolocation mobile

Question

Logré obtener la latitud y la longitud del usuario mediante la geolocalización html5.

//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get latitude and longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
}

Quiero mostrar el nombre de la ciudad, parece que la única forma de obtenerlo es usar una API de geolocalización inversa. Leo la documentación de google para la geolocalización inversa, pero no sé cómo obtener el resultado en mi sitio.

No sé cómo usar esto: "http://maps.googleapis.com/maps/api/geocode/json?latlng=''+lat+'',''+long+''&sensor=true" para mostrar el nombre de la ciudad en la pagina.

¿Cuál es la forma estándar de hacerlo?

Answer 1

Aquí está la versión de trabajo actualizada que obtendrá Ciudad / Ciudad. Parece que algunos campos se modifican en la respuesta json. Refiriendo las respuestas anteriores para estas preguntas. (Gracias a Michal y una referencia más: Link

var geocoder;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng);
}

function errorFunction() {
  alert("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();

}

function codeLatLng(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({latLng: latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        var arrAddress = results;
        console.log(results);
        $.each(arrAddress, function(i, address_component) {
          if (address_component.types[0] == "locality") {
            console.log("City: " + address_component.address_components[0].long_name);
            itemLocality = address_component.address_components[0].long_name;
          }
        });
      } else {
        alert("No results found");
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
}

Answer 2

Aquí hay otra oportunidad ... Agregar más a la respuesta aceptada posiblemente más completa ... por supuesto, la carcasa hará que se vea elegante.

function parseGeoLocationResults(result) {
    const parsedResult = {}
    const {address_components} = result;

    for (var i = 0; i < address_components.length; i++) {
        for (var b = 0; b < address_components[i].types.length; b++) {
            if (address_components[i].types[b] == "street_number") {
                //this is the object you are looking for
                parsedResult.street_number = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "route") {
                //this is the object you are looking for
                parsedResult.street_name = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_1") {
                //this is the object you are looking for
                parsedResult.sublocality_level_1 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_2") {
                //this is the object you are looking for
                parsedResult.sublocality_level_2 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "sublocality_level_3") {
                //this is the object you are looking for
                parsedResult.sublocality_level_3 = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "neighborhood") {
                //this is the object you are looking for
                parsedResult.neighborhood = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "locality") {
                //this is the object you are looking for
                parsedResult.city = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "administrative_area_level_1") {
                //this is the object you are looking for
                parsedResult.state = address_components[i].long_name;
                break;
            }

            else if (address_components[i].types[b] == "postal_code") {
                //this is the object you are looking for
                parsedResult.zip = address_components[i].long_name;
                break;
            }
            else if (address_components[i].types[b] == "country") {
                //this is the object you are looking for
                parsedResult.country = address_components[i].long_name;
                break;
            }
        }
    }
    return parsedResult;
}

Answer 3

Como @PirateApp mencionó en su comentario, está explícitamente en contra de las Licencias de la API de Google Maps el uso de la API de Google Maps como usted desea.

Tiene varias alternativas, incluida la descarga de una base de datos Geoip y consultarla localmente o utilizar un servicio de API de terceros, como el mío ipdata.co

Ipdata.co le brinda la geolocalización, organización, moneda, zona horaria, código de llamada, bandera y datos de estado del nodo de salida Tor desde cualquier dirección IPv4 o IPv6.

¡Y es escalable con 10 endpoints globales cada uno capaz de manejar> 800M diariamente!

$.get("https://api.ipdata.co", function(response) {
  $("#ip").html("IP: " + response.ip);
  $("#city").html(response.city + ", " + response.region);
  $("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a href="https://ipdata.co">ipdata.co</a> - IP geolocation API</h1>

<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>

El violín https://jsfiddle.net/6wtf0q4g/

Answer 4

Después de buscar y juntar un par de soluciones diferentes junto con mis propias cosas, se me ocurrió esta función:

function parse_place(place)
{
    var location = [];

    for (var ac = 0; ac < place.address_components.length; ac++)
    {
        var component = place.address_components[ac];

        switch(component.types[0])
        {
            case ''locality'':
                location[''city''] = component.long_name;
                break;
            case ''administrative_area_level_1'':
                location[''state''] = component.long_name;
                break;
            case ''country'':
                location[''country''] = component.long_name;
                break;
        }
    };

    return location;
}

Answer 5

El uso de geolocalización html5 requiere permiso del usuario. En caso de que no desee esto, busque un localizador externo como https://geoip-db.com. IPv6 es compatible.

• JSON: https://geoip-db.com/json
• JSONP: https://geoip-db.com/jsonp

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>GEOIP DB - jQuery example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div>Country: <span id="country"></span>
    <div>State: <span id="state"></span>
    <div>City: <span id="city"></span>
    <div>Latitude: <span id="latitude"></span>
    <div>Longitude: <span id="longitude"></span>
    <div>IP: <span id="ip"></span>
    <script>
        $.ajax({
            url: "https://geoip-db.com/jsonp",
            jsonpCallback: "callback",
            dataType: "jsonp",
            success: function( location ) {
                $(''#country'').html(location.country_name);
                $(''#state'').html(location.state);
                $(''#city'').html(location.city);
                $(''#latitude'').html(location.latitude);
                $(''#longitude'').html(location.longitude);
                $(''#ip'').html(location.IPv4);  
            }
        });     
    </script>
</body>
</html>

Para obtener un ejemplo de javascript puro, sin usar jQuery, consulte this respuesta.

Answer 6

Haría algo así usando Google API.

Tenga en cuenta que debe incluir la biblioteca de google maps para que esto funcione. El geocodificador de Google devuelve una gran cantidad de componentes de direcciones, por lo que debe tener una idea clara de cuál tendrá la ciudad.

"administrative_area_level_1" es generalmente lo que está buscando, pero a veces la localidad es la ciudad que está buscando.

De todos modos, se pueden encontrar más detalles sobre los tipos de respuesta de Google here y here .

A continuación está el código que debería hacer el truco:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Reverse Geocoding</title> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 
//Get the latitude and the longitude;
function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}

function errorFunction(){
    alert("Geocoder failed");
}

  function initialize() {
    geocoder = new google.maps.Geocoder();



  }

  function codeLatLng(lat, lng) {

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({''latLng'': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
        if (results[1]) {
         //formatted address
         alert(results[0].formatted_address)
        //find country name
             for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                    //this is the object you are looking for
                    city= results[0].address_components[i];
                    break;
                }
            }
        }
        //city data
        alert(city.short_name + " " + city.long_name)


        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script> 
</head> 
<body onload="initialize()"> 

</body> 
</html> 

Answer 7

Otro enfoque para esto es usar mi servicio, http://ipinfo.io , que devuelve la ciudad, la región y el nombre del país en función de la dirección IP actual del usuario. Aquí hay un ejemplo simple:

$.get("http://ipinfo.io", function(response) {
    console.log(response.city, response.country);
}, "jsonp");

Aquí hay un ejemplo más detallado de JSFiddle que también imprime la información de respuesta completa, para que pueda ver todos los detalles disponibles: http://jsfiddle.net/zK5FN/2/

Answer 8

Puede obtener el nombre de la ciudad, el país, el nombre de la calle y otros datos geográficos mediante la API de geocodificación de Google Maps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {
            console.log(position.coords.latitude)
            console.log(position.coords.longitude)

            var GEOCODING = ''https://maps.googleapis.com/maps/api/geocode/json?latlng='' + position.coords.latitude + ''%2C'' + position.coords.longitude + ''&language=en'';

            $.getJSON(GEOCODING).done(function(location) {
                console.log(location)
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

y para mostrar esta información en la página usando jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>

    <p>Country: <span id="country"></span></p>
    <p>State: <span id="state"></span></p>
    <p>City: <span id="city"></span></p>
    <p>Address: <span id="address"></span></p>

    <p>Latitude: <span id="latitude"></span></p>
    <p>Longitude: <span id="longitude"></span></p>

    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(success, error);

        function success(position) {

            var GEOCODING = ''https://maps.googleapis.com/maps/api/geocode/json?latlng='' + position.coords.latitude + ''%2C'' + position.coords.longitude + ''&language=en'';

            $.getJSON(GEOCODING).done(function(location) {
                $(''#country'').html(location.results[0].address_components[5].long_name);
                $(''#state'').html(location.results[0].address_components[4].long_name);
                $(''#city'').html(location.results[0].address_components[2].long_name);
                $(''#address'').html(location.results[0].formatted_address);
                $(''#latitude'').html(position.coords.latitude);
                $(''#longitude'').html(position.coords.longitude);
            })

        }

        function error(err) {
            console.log(err)
        }
    </script>
</body>
</html>

Answer 9

Puede usar https://ip-api.io/ para obtener el nombre de la ciudad. Es compatible con IPv6.

Como una bonificación, permite comprobar si la dirección IP es un nodo tor, un proxy público o un spammer.

Código Javascript:

$(document).ready(function () {
        $(''#btnGetIpDetail'').click(function () {
            if ($(''#txtIP'').val() == '''') {
                alert(''IP address is reqired'');
                return false;
            }
            $.getJSON("http://ip-api.io/json/" + $(''#txtIP'').val(),
                 function (result) {
                     alert(''City Name: '' + result.city)
                     console.log(result);
                 });
        });
    });

código HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
    <input type="text" id="txtIP" />
    <button id="btnGetIpDetail">Get Location of IP</button>
</div>

Salida JSON

{
    "ip": "64.30.228.118",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "FL",
    "region_name": "Florida",
    "city": "Fort Lauderdale",
    "zip_code": "33309",
    "time_zone": "America/New_York",
    "latitude": 26.1882,
    "longitude": -80.1711,
    "metro_code": 528,
    "suspicious_factors": {
        "is_proxy": false,
        "is_tor_node": false,
        "is_spam": false,
        "is_suspicious": false
    }
}

Answer 10

geolocator.js puede hacer eso. (Soy el autor).

Obtener el nombre de la ciudad (dirección limitada)

geolocator.locateByIP(options, function (err, location) {
    console.log(location.address.city);
});

Obtener información de dirección completa

El siguiente ejemplo primero probará la API de geolocalización HTML5 para obtener las coordenadas exactas. Si falla o es rechazado, se recurrirá a la búsqueda Geo-IP. Una vez que obtiene las coordenadas, geocodificará las coordenadas en una dirección.

var options = {
    enableHighAccuracy: true,
    fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
    addressLookup: true
};
geolocator.locate(options, function (err, location) {
    console.log(location.address.city);
});

Esto utiliza las API de Google internamente (para la búsqueda de direcciones). Entonces, antes de esta llamada, debe configurar el geolocalizador con su clave API de Google.

geolocator.config({
    language: "en",
    google: {
        version: "3",
        key: "YOUR-GOOGLE-API-KEY"
    }
});

geolocator.js admite geolocalización (a través de búsquedas HTML5 o IP), geocodificación, búsquedas de direcciones (geocodificación inversa), distancia y duraciones, información de zona horaria y muchas más funciones ...