hubspot-address-autocomplete.js

<script>
  // Create the script tag, set the appropriate attributes, be sure to replace "YOURAPIKEY" in the script source url with your Google Maps API Key
var script = document.createElement('script');
script.src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDAjZLPneaw12wSVZ0v0x-ujSA7hYxjbX0&libraries=places&callback=initAutocomplete';
script.async = true;

// Append the 'script' element to 'head' after the page loads 
window.addEventListener('load', function(){document.head.appendChild(script);})

let autocomplete;
let address1Field;
let address2Field;
let postalField;

function initAutocomplete() {
	address1Field = document.getElementsByName('address')[0]; //bgs
	postalField = document.getElementsByName('zip')[0]; //bgs
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  // When the user selects an address from the drop-down, populate the address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @TS-ignore remove once typings fixed
    const componentType = component.types[0];
    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        //postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        //change .hs-city below to the class for your city input field if necessary
        //comment out or delete the line below if no city field in your form
		  // document.querySelector(".hs-city .hs-input").value = component.long_name; //bgs
        break;
      case "administrative_area_level_1": {
        //change .hs-state below to the class for your city input field if necessary
        //comment out or delete the line below if no state field in your form
        // document.querySelector(".hs-state .hs-input").value = component.short_name;  //bgs
        break;
      }
      case "country":
        //change .hs-country below to the class for your city input field if necessary
        //comment out or delete the line below if no country field in your form
	  // document.querySelector(".hs-country .hs-input").value = component.long_name;  //bgs
        break;
    }
  }
  address1Field.value = address1;
  //comment out or delete the line below if no postal code field in form
  postalField.value = postcode;
}

window.initAutocomplete = initAutocomplete;
 

</script>