Suggest full address only on google address autocomplete

Question

I am trying to implement the google address autocomplete feature through js. My implementation is shown below. Its working fine, the only problem is while searching the address, it suggests the generic address without postcodes as well. What my system needs is the full address with postcodes. See screenshot https://prnt.sc/wi228m . Below is my current implementation

 // google map and address
  var autocomplete;
  const componentForm = {
    street_number: "short_name",
    route: "long_name",
    locality: "long_name",
    administrative_area_level_1: "short_name",
    country: "long_name",
    postal_code: "short_name",
  };
  
  function googleMapInit() {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("searchAddressList"),
      { types: ["geocode"] }
    );
    
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
  }

  google.maps.event.addDomListener(window, 'load', googleMapInit);
  
  function fillInAddress() {
    $('#country').val('');
    $('#zip').val('');
    $('#province').val('');
    $('#city').val('');
    $('#address').val('');

    const place = autocomplete.getPlace()

    for (const component of place.address_components) {
      const addressType = component.types[0];
      if (componentForm[addressType]) {
        const val = component[componentForm[addressType]];

        switch(addressType) {
          case 'country':
            $('#country').val(val)
            break;
          case 'postal_code':
            $('#zip').val(val)
            break;
          case 'administrative_area_level_1':
            $('#province').val(val)
            break;
          case 'locality':
            $('#city').val(val)
            break;
          case 'route':
            $('#address').val(val)
            break;
        }
      }
    }
  }

Could someone suggest how to just show full address?

According to the [docs](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) you have a typo: `address_component` should be `address_components` and you might want to try with something else like `formatted_address`. That said, I doubt that Sydney has only 1 postcode so it makes sense that typing in only "Sydney" would not return a postcode. — MrUpsidown, Jan 07 '21 at 09:56

score 0 · Accepted Answer · answered Jan 10 '21 at 13:18

I found the solution to it and sharing here so that it could help others as well.

I just had to replace a parameter on the googleMapInit() method.

See code below:

function googleMapInit() {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("searchAddressList"),
      { types: ["address"],componentRestrictions: {country: 'us'} }
    );
    
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
  }

Note the field "types", its parameter has changed. This will give you full address. I have added one more parameter to restrict the search results for US only.

Suggest full address only on google address autocomplete

1 Answers1