Google Places Autocomplete

Suggests Google addresses as users type and ensures they select a valid one.

Javascript

Copy Code

<!-- 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>

How to set it up

Create a Google Cloud Project
- Go to Google Cloud Console.
- Create a new project or select an existing one.
Enable the APIs
- Navigate to APIs & Services -> Library.
- Enable Places API.
Generate an API Key
- Go to APIs & Services -> Credentials -> Create Credentials -> API Key
- Copy the key
Restrict the API Key
- Click the pencil icon next to your API key and under key restrictions, select HTTP referrers.
- Enter the website with a "*" e.g. https://yourdomain.com/* where this key will be used. The "*" means all pages on your website are allowed.
Include the Google Places script in your <head> code
Add these class name .address-autocomplete to your address input field.
Add the Google Places Address Autocomplete script to your <body> code and insert your API key (where the current code says 'APIKEY'.

How it works

When you start typing
- Google watches what the user types and shows matching addresses.
When you pick an address
- The box fills with the full address.
- The website knows it's a valid address.
If you don't pick from the list
- The website asks you to choose one from the dropdown, this prevents mistakes like typos.
Country restriction
- The current code will be limited to New Zealand only so users don't pick addresses from other countries. You can change this by changing the 'country' value.