Autocomplete address form fields with Google maps

[AnaïsB]

Hello there, 

It would be great if we had the option to make form fields autocomplete ; for adresses, using the Google Maps autosuggest could do something like that : 

We have a lot of trouble treating duplicates and typos, which would be resolved if we could count on adresses being a unique match thanks to set values. 

Thanks a lot!

[RThomas6]

This is crazy. This is a massive advantage to have address autocomplete, as it reduces friction and provides a standardized address that is more accurate than manual entry. 

I use address autocomplete on every other business.  I'm talking tiny companies. It's actually super basic code and all you do is get a Google Places API key.   But here I am with this expensive CRM for a mid-sized corporation and I can't even use address autocomplete.  

[jaylenbledsoe]

Major need.

[tsprunk]

This can be done with Google Maps API. I'll do my best to explain it below, but you can also hire my agency to do it for you if you'd rather not bother with it (SimpleStrat.com).

To do this, you'll need to add the javascript below to the page where your form will appear. There's also a way to add it to the form embed code directly but I won't get into that here. There are a couple things you'll likely need to edit depending on your form and the fields you want filled in.

This code is currently set up to work for US and Canada is based on the code found on this page: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

// 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=YOURAPIKEY&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() {
  //change .hs-address below to the class for your 1st line
  //address input field if necessary
  address1Field = document.querySelector(".hs-address .hs-input");
  //change .hs-zip below to the class for your postal code input field if necessary 
  postalField = document.querySelector(".hs-zip .hs-input");
  // 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; 
        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;
        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;
        break;
    }
  }

  address1Field.value = address1;
  //comment out or delete the line below if no postal code field in form
  postalField.value = postcode;
}

window.initAutocomplete = initAutocomplete;

[NYosef]

This is a must have for our use case. We use HubSpot for ticket management for location-based services (we're an NGO funding home repairs for elders in need). A Google Maps field will help to verify that the street name the elder provided was correctly understood by the dispatcher, instead of performing this verification in another tool (Google Maps).

[BrunaKeller]

Hey guys, looking at all the answers since 2019 - did we actually ended up having a native integration to be able to do this?

I am based in New Zealand and what I found with HubSpot is that has a few integrations available, but they work for US/Uk or Canada but not to verify addresses in New Zealand or Australia.

If anyone finds anything that could work and it's easy to use (integrate with HS), please let me now!

I really appreciate it.

Cheers

[tsprunk]

@BrunaKeller I'm not aware of any native integration that autocompletes addresses in forms in real time, even for the US/UK/Canada. I believe you still need to use the Google Maps API. The solution I posted above should work for any country with some modifications.

[babirossi1]

This is so important!! We are a customer facing business and it would make our lives so much easier

[BrandonCarn]

We have been using Smarty - https://www.smarty.com/ - to verify postal addresses for a couple of years now.
It would be nice if HubSpot offered this but I doubt they would be able to provide the options needed that we can get from Smarty using thier api and scripts.

[heisdnice]

This really needs to be implemented

[blpmedia]

Upvoted!  I'm surprised this isn't a standard feature. The current way is very clunky.  Let's get it done HubSpot. 🙂 

[BWeinstin]

Upvote!

[cjmarcelo]

Hi @tsprunk 

I was trying to implement the javascript you provided but struggling to point the hubspot form field the autocomplete should appear. My hubspot form is embedded in a google site and I am unsure what is the exact replacement I need to enter on this part:

 

Here's an example element in one of the fields I have in my hubspot form
<input id="service_location-af692672-76c2-416d-91c1-c357fc8620c2" name="service_location" required="" placeholder="" type="text" class="hs-input" inputmode="text" value="">

Can you guide me what should be the exact change/value I need under document.querySelector? I've tried putting the input id, the name, all is failing... the form is being loaded but its not initializing the google address validation api

[lindahouben]

This would also be a good feature for the location in Meetings. Now it has to be manually added every time.