Add address autocomplete to the customer booking flow

Do you want to implement an address finder or autocomplete to help customers find and pre-fill address fields? This can be done in the customer booking portal using Google Tag Manager.

The example below shows how to load the Google Maps Place Autocomplete library and have it appear when someone starts typing into the 'Address' field during the signup or booking flow. In this example we also show how to pre-fill a UK style postcode custom field, but this can be adapted to different locations to extract address data as required.

Steps

1. Read up on Google Tag Manager and how it works
2. Implement a new 'Custom HTML' tag using the example script below
3. Set up a 'Element visibility' trigger to load the script

Script example

Note: You'll need to update parts of this script to work with your setup; for example:

• Replace {{yourAPIKey}} with a valid Google Maps API key
• Replace fields like unitOrder.account.customFields.postcode with names of fields that match your custom fields.

<script>
// Docs: https://developers.google.com/maps/documentation/javascript/place-autocomplete
function initMapAC() {
  var addressInput = document.getElementById('unitOrder.account.address');
  var postcodeInput = document.getElementById('unitOrder.account.customFields.postcode');
  
  
  var autocomplete = new google.maps.places.Autocomplete(addressInput, {
    componentRestrictions: { country: 'uk' },
    types: ['address'],
    fields: ['address_components', 'formatted_address'],
  });
  console.log('Google maps address autocomplete has loaded', autocomplete);
  
  autocomplete.addListener('place_changed', function () {
    var place = autocomplete.getPlace();
    console.log('got place', place);
    var postcode = place.address_components.find(function(c) { return c.types[0] === 'postal_code' });
    if (!postcode) alert('Your adress does not have a valid postcode, please complete it');
    postcodeInput.value = postcode.long_name;
  });
}
</script>
<script id="__googleMapsScript" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMapAC&libraries=places&key={{yourAPIKey}}" async></script>

Triggering the script

Google Tag Manager needs to know when to load the script; do this with a 'Element Visibility' style trigger. The element ID to target will usually be unitOrder.account.address (see example setup below)