Tengo este componente de autocompletar que tengo en una página, pero los componentes de address_components están devolviendo datos de diferentes longitudes, por lo que no es fácil determinar qué índices representan la ciudad o el estado, por ejemplo. este es el codigo
$(document).ready(function(){ var input = document.getElementById('elm_19'); var options = { componentRestrictions: { country: 'uk' } }; var autocomplete = new google.maps.places.Autocomplete(input, options); $(input).on('input',function(){ var str = input.value; var prefix = ''; if(str.indexOf(prefix) == 0) { console.log(input.value); } else { if (prefix.indexOf(str) >= 0) { input.value = prefix; } else { input.value = prefix+str; } } }); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); var lat = place.geometry.location.lat(); var long = place.geometry.location.lng(); /** var city = place.address_components[3].long_name; var country = place.address_components[6].short_name; var state = place.address_components[4].short_name; var zip = place.address_components[7].long_name; $("#elm_23").val(city); $("#elm_27").val(country).change(); $("#elm_25 option:selected").text(state); $("#elm_29").val(zip); */ }); }); ¿Existe una forma permanente de obtener siempre la city,country,state and zip ya que los índices cambian en cada dirección seleccionada que se completa automáticamente?
Utilicé geocodificación api y lo resolví así.
$(document).ready(function(){ var input = document.getElementById('elm_19'); var options = { componentRestrictions: { country: 'uk' } }; var autocomplete = new google.maps.places.Autocomplete(input, options); $(input).on('input',function(){ var str = input.value; var prefix = ''; if(str.indexOf(prefix) == 0) { console.log(input.value); } else { if (prefix.indexOf(str) >= 0) { input.value = prefix; } else { input.value = prefix+str; } } }); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); var lat = place.geometry.location.lat(); var lon = place.geometry.location.lng(); var latlng = new google.maps.LatLng(lat, lon); var geocoder = geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'latLng': latlng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { var address = results[0].formatted_address; var pin = results[0].address_components[results[0].address_components.length - 1].long_name; var country = results[0].address_components[results[0].address_components.length - 2].long_name; var state = results[0].address_components[results[0].address_components.length - 3].long_name; var city = results[0].address_components[results[0].address_components.length - 4].long_name; $("#elm_27 option:selected").text(country); $("#elm_25 option:selected").text(state); document.getElementById('elm_23').value = city; document.getElementById('elm_29').value = pin; } } }); /** var city = place.address_components[3].long_name; var country = place.address_components[6].short_name; var state = place.address_components[4].short_name; var zip = place.address_components[7].long_name; $("#elm_23").val(city); $("#elm_27").val(country).change(); $("#elm_25 option:selected").text(state); $("#elm_29").val(zip); */ }); });