Location Autocomplete Widget integration guide

The Location Autocomplete widget is configured for searching locations instead of addresses.

It is the same service as the Address Autocomplete Widget but we have saved you the trouble of configuring.

Location autocomplete enables searching for places based on postcode, suburb or city, once a location is selected the associated verified data is populated into your website, form or CRM.

This page outlines how to integrate the Addressfinder Location Autocomplete Widget, for advanced integration utilise the Location Autocomplete and Metadata APIs.

Common uses:

• Link online customers with physical stores
• Choose nearest warehouse to minimise delivery cost
• Accurate sales attribution for online shopping

Steps to integrate

This is the guide to integrating the widget,

You’ll need access to update the website or form where you want to add the widget.

1. Copy and paste the AU or NZ code snippet for below into the HTML of your webpage, ideally just before the closing </body> tag.

2. Replace "your_search_field_id_here" (placeholder) with the ID of your location search field (eg, store_finder).

3. Replace your_license_key with your Addressfinder license key. You can find it in the Addressfinder Portal. If you don't have an Addressfinder account, sign up for a free trial today.

4. Update the location_types to suit your business needs. Remove the options as needed.

   Australian location types and descriptions:

   • "location_types": "street" - searches street-suburb-state-postcode combinations
   • "location_types": "locality" - searches suburb-state-postcode combinations
   • "location_types": "street,locality" - searches both street-suburb-state-postcode and suburb-state-postcode combinations

   New Zealand location types and descriptions:

   • "street": "0" - excludes street-suburb-city combinations from the search results
   • "suburb": "0" - excludes suburb-city combinations from the search results
   • "city": "0" - excludes town/city from the search results
   • "region": "0" - excludes region from the search results

5. Update the code snippet with the IDs of the fields you are using to capture the selected location.

6. Test.

Location autocomplete code snippet (Australian locations)

Multiple lines version (AU)

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(

// Step 2 - Replace with the id of your search field
            document.getElementById('your_search_field_id_here'),

// Step 3 - Replace with your license key
            'your_license_key_here',
            'AU', {
                "show_addresses": false,
                "show_locations": true,
                "location_params": {
// Step 4 - update the location types below to suit your business needs
                    "location_types": "street, locality, state"
                }
            }
        );

// Step 5 - Replace each of the values below with your address field ids
        widget.on('location:select', function(fullLocation, metaData) {
            document.getElementById('street').value = metaData.street;
            document.getElementById('suburb').value = metaData.locality_name;
            document.getElementById('state').value = metaData.state_territory;
            document.getElementById('postcode').value = metaData.postcode;
        });
    };

    function downloadAddressFinder() {
        var script = document.createElement('script');
        script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
        script.async = true;
        script.onload = initAddressFinder;
        document.body.appendChild(script);
    };

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

Location autocomplete code snippet (New Zealand locations)

Multiple lines version (NZ)

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(
// Step 2 - Replace with the id of your search field
            document.getElementById('your_search_field_id_here'),
// Step 3 - Replace with your license key
            'your_license_key_here',
            'NZ', {
                "show_addresses": false,
                "show_locations": true,
// Step 4 - update the location types below to suit your business needs
                "location_params": {
                    "street": "0",
                    "suburb": "0",
                    "city": "0",
                    "region": "0"
                }
            }
        );

// Step 5 - Replace each of the values below with your address field ids
        widget.on('location:select', function(fullLocation, metaData) {
            document.getElementById('street_field_id').value = metaData.street;
            document.getElementById('suburb_field_id').value = metaData.suburb;
            document.getElementById('city_field_id').value = metaData.city;
            document.getElementById('region_field_id').value = metaData.region;
        });
    };

    function downloadAddressFinder() {
        var script = document.createElement('script');
        script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
        script.async = true;
        script.onload = initAddressFinder;
        document.body.appendChild(script);
    };

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>