Address Auto Complete – Google Places API – Order Forms (MIKE)

Use the below snippet to have an Auto-Complete Address input powered by google for your 2-step-order form

It will fill in all the address fields separately: City, State and Postal Code

NOTE*:
You will need a Google Places API key.
Please Make Sure to Enable the Google Maps API as well as the Google Places API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script>
var input = document.querySelector('input[name="address"]');
var options = {
  types: ['address']
};
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'short_name',
  postal_code: 'short_name'
};

autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.setFields(['address_component']);
autocomplete.addListener('place_changed', fillInAddress);
function fillInAddress() {
  var place = autocomplete.getPlace();
  console.log(place)
  var street;
  var address = document.querySelector('input[name="address"]')
  var city = document.querySelector('input[name="city"]');
  var state = document.querySelector('input[name="state"]')
  var postalCode = document.querySelector('input[name="zipcode"]')
  var country = document.querySelector('select[name="country"]')

  place.address_components.forEach(addressComp => {
    var addressType = addressComp.types[0];
    var val = addressComp[componentForm[addressType]];
    if (addressType == "street_number") {
      console.log(val)
      street = val;
    } else if (addressType == "route"){
      console.log(val)
      street += " " + val;
    } else if(addressType == "locality") {
      console.log(val)
      city.value = val
    } else if(addressType == "administrative_area_level_1") {
      console.log(val)
      state.value = val
    } else if(addressType == "postal_code") {
      console.log(val)
      postalCode.value = val
    } else if(addressType == "country") {
      console.log(val)
      country.value = val
    }
  });
  address.value = street

  var e = document.createEvent('HTMLEvents');
  e.initEvent('input', true, true);
  
  address.dispatchEvent(e);
  city.dispatchEvent(e);
  state.dispatchEvent(e);
  postalCode.dispatchEvent(e);
  
  var sl = document.createEvent('HTMLEvents');
  sl.initEvent('change', true, true);
  country.dispatchEvent(sl);
  setTimeout(function () {
  	console.log(document.querySelector(".pac-container"))
  	document.querySelector(".pac-container").style.display = "none"
    console.log(document.querySelector(".pac-container"))
  },1000)
}
</script>