google-maps - saber - mapa con coordenadas geográficas
Cómo extraer la ciudad, el país, la latitud y la longitud de los resultados de Google Places (2)
Si console.log(place); un vistazo a console.log(place); verás algo como ...
El objeto devuelto contiene address_components . Esta es una matriz que se crea a partir de los datos disponibles, por lo que no puede garantizar qué campos contendrá. Puede encontrar más detalles sobre lo que se devuelve en la descripción del servicio web de la API de Google Places .
Debe recorrer la matriz y extraer los campos que necesita. city posible que la city no exista pero postal_town o locality , en cuyo caso querrá usar esos valores.
Tenga en cuenta que es posible que no obtenga ningún valor para la city o el country si esos datos no están disponibles.
Existe un código de muestra en el sitio de Google Developers que hace la mayor parte de lo que necesita.
Estoy usando el siguiente script de Google Places para obtener la ubicación del usuario. Obtengo la dirección completa, pero necesito analizar el resultado para obtener la ciudad, el país.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Places Autocomplete textbox using google maps api</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, ''load'', initialize);
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById(''txtAutocomplete''));
google.maps.event.addListener(autocomplete, ''place_changed'', function () {
var place = autocomplete.getPlace();
var location = "<b>Address</b>: " + place.formatted_address + "<br/>";
location += "<b>Latitude</b>: " + place.geometry.location.lat() + "<br/>";
location += "<b>Longitude</b>: " + place.geometry.location.lng();
document.getElementById(''lblResult'').innerHTML = location;
});
}
</script>
<span>Location:</span>
<input type="text" id="txtAutocomplete" style="width: 300px" placeholder="Enter your address" /><br /><br />
<label id="lblResult" />
</body>
</html>
Probé la secuencia de comandos siguiente, pero no funciona todo el tiempo, ya que en algunos casos, el formato de la dirección es diferente.
var city = place.address_components[0] && place.address_components[0].short_name || '''';
document.getElementById(''lblResult'').innerHTML = location;
console.log(city);
Me gusta usar Lodash , porque proporciona defensa contra errores cuando falta una propiedad, o el valor pasado no es del tipo esperado.
Aunque estoy seguro de que hay formas más elegantes, he desarrollado este método para recolectar cierta información de la información de Google Places:
Versión ES5 Fiddle :
var address = place.address_components;
var city, state, zip;
address.forEach(function(component) {
var types = component.types;
if (types.indexOf(''locality'') > -1) {
city = component.long_name;
}
if (types.indexOf(''administrative_area_level_1'') > -1) {
state = component.short_name;
}
if (types.indexOf(''postal_code'') > -1) {
zip = component.long_name;
}
});
var lat = place.geometry.location.lat;
var lng = place.geometry.location.lng;
Utilizando Lodash:
var address = _.get(place, ''address_components'');
var city, state, zip;
_.forEach(address, function (component) {
let types = _.get(component, ''types'');
if (_.includes(types, ''locality'')) {
city = _.get(component, ''long_name'');
}
if (_.includes(types, ''administrative_area_level_1'')) {
state = _.get(component, ''short_name'');
}
if (_.includes(types, ''postal_code'')) {
zip = _.get(component, ''long_name'');
}
});
var lat = _.get(place, ''geometry.location.lat'');
var lng = _.get(place, ''geometry.location.lng'');