I have written a small function that will get the user address using the google.maps.event.addListener()
. Here is the jsFiddle.
Everything is exactly w
The above solution works great to autocomplete individual address fields. Here's an implementation with options to bias the results, however I'm having problems using bounds to bias the results of the autocomplete field. Here's my jsFiddle.
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(33.89028890,-117.5617340),
new google.maps.LatLng(33.7706850,-117.6639850)
);
var updateAddress = {
autocomplete: new google.maps.places.Autocomplete($("#address")[0], {
bounds: defaultBounds,
types: ['geocode'],
componentRestrictions: {country: 'us'}
}),
event: function(){
var self = this;
google.maps.event.addListener(self.autocomplete, 'place_changed', function() {
var place = self.autocomplete.getPlace(),
address = place.address_components,
streetAddress = '',
suburb = '',
state = '',
zip = '',
country = '';
for (var i = 0; i < address.length; i++) {
var addressType = address[i].types[0];
if (addressType == 'subpremise') {
streetAddress += address[i].long_name + '/';
}
if (addressType == 'street_number') {
streetAddress += address[i].long_name + ' ';
}
if (address[i].types[0] == 'route') {
streetAddress += address[i].long_name;
}
if (addressType == 'locality') {
suburb = address[i].long_name;
}
if (addressType == 'administrative_area_level_1') {
state = address[i].long_name;
}
if (addressType == 'postal_code') {
zip = address[i].long_name;
}
if (addressType == 'country') {
country = address[i].long_name;
}
}
// update the textboxes
setTimeout(function(){$('#address').val(streetAddress);},50);
$('#suburb').val(suburb);
$('#state').val(state);
$('#zip').val(zip);
});
}
};
updateAddress.event();
Use a short delay to apply streetAddress
setTimeout(function(){$('#address').val(streetAddress);},50);