Parsing address_components in Google Maps upon autocomplete select

google-maps, google-maps-api-3, javascript, jquery

Solution

Below is the full working code:

$('#spot_address').autocomplete({
  // This bit uses the geocoder to fetch address values
  source: function(request, response) {
    geocoder.geocode( {'address': request.term }, function(results, status) {
      response($.map(results, function(item) {
          // Get address_components
          for (var i = 0; i < item.address_components.length; i++)
          {
            var addr = item.address_components[i];
            var getCountry;
            if (addr.types[0] == 'country') 
              getCountry = addr.long_name;
          }
        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);
  }
});

Problem

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.

Original source