Google Places Autocomplete

<!-- Google Places -->
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places"></script>

<!-- Google Places Address Autocomplete -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all address inputs with this class
  const addressInputs = document.querySelectorAll('.address-autocomplete');
  
  addressInputs.forEach(addressInput => {
    if (addressInput) {
      const autocomplete = new google.maps.places.Autocomplete(addressInput, {
        types: ['address'],
        componentRestrictions: { country: 'nz' }
      });
      
      // Create a hidden validation field
      const validationField = document.createElement('input');
      validationField.type = 'text';
      validationField.name = `${addressInput.id}-validation`;
      validationField.required = true;
      validationField.style.display = 'none';
      addressInput.parentNode.appendChild(validationField);
      
      autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        
        if (place.formatted_address) {
          addressInput.value = place.formatted_address;
          validationField.value = 'valid';
          addressInput.setCustomValidity('');
        } else {
          validationField.value = '';
          addressInput.setCustomValidity('Please select a valid address from the dropdown');
        }
      });
      
      addressInput.addEventListener('input', function() {
        validationField.value = '';
        addressInput.setCustomValidity('Please select an address from the dropdown');
      });
    }
  });
});
</script>