I have this auto complete component i have in a page but the address_components are returning data of varying lengths so its not easy to settle on what indexes represent city or state for instance. This is the code
$(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);
*/
});
});
is there a permanent way of always getting the city,country,state and zip since the indexes are changing on every selected address auto completed?
I used geocoding api and solved it like this
$(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);
*/
});
});