Parsing address_components in Google Maps upon autocomplete select

Question

I have the following code to parse the country when the autocomplete list is selected:

$('#spot_address').autocomplete({   // This bit uses the geocoder to fetch address values   source: function(request, response) {     geocoder.geocode( {'address': request.term }, function(results, status) {       // Get address_components       for (var i = 0; i < results[0].address_components.length; i++)       {         var addr = results[0].address_components[i];         var getCountry;         if (addr.types[0] == 'country')            getCountry = addr.long_name;       }       response($.map(results, function(item) {         return {           label: item.formatted_address,           value: item.formatted_address,           latitude: item.geometry.location.lat(),           longitude: item.geometry.location.lng(),           country: getCountry         }       }));     })   },    // This bit is executed upon selection of an address   select: function(event, ui) {     // Get values     $('#spot_country').val(ui.item.country);     $('#spot_lat').val(ui.item.latitude);     $('#spot_lng').val(ui.item.longitude);     var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);     marker.setPosition(location);     map.setCenter(location);   },    // Changes the current marker when autocomplete dropdown list is focused   focus: function(event, ui) {     var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);     marker.setPosition(location);     map.setCenter(location);   } }); 

However, the code above doesn't work, and when the country is parsed, only the first result of the autocomplete is parsed no matter what, which is significant with the array results[0] because it only fetches the first result.

I tried to move it to the select function, but ui in select only contains formatted_address, longitude and latitude, but not the address_components.

What must I do to send the correct country when the autocomplete list item is selected?

Many thanks.

Answer 1

General solution:

var address_components = results[0].address_components; var components={};  jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});}); 

Now your components looks like this:

street_number: "1100",  route: "E Hector St",  locality: "Conshohocken",  political: "United States",  administrative_area_level_3: "Whitemarsh"… administrative_area_level_1: "Pennsylvania" administrative_area_level_2: "Montgomery" administrative_area_level_3: "Whitemarsh" country: "United States" locality: "Conshohocken" political: "United States" postal_code: "19428" route: "E Hector St" street_number: "1100" 

Which you can query like this:

components.country