AddressFinder

The best way to find exact addresses in New Zealand

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top

Menu

Get Started Free

  • Pricing
  • Features & plugins
  • About us
  • Case studies
  • FAQ
  • Contact
  • Blog
  • JavaScript widget docs
  • API developer docs
  • Log in
  • Pricing
  • Features
  • More
    • Company & product
      • About Us
      • Case Studies
      • FAQ
      • Partners
      • Blog
      Contact Us
    • Plugins
      • Magento
      • WooCommerce
      • BigCommerce
      • Salesforce
      • Shopify
      • iOS
    • JavaScript widget docs
      • Integration Guide
      • Widget Code Generator
      • Widget Reference
      • Code Examples
      See all JavaScript docs
    • API developer docs
      • Address Autocomplete
      • Address Metadata
      • Address Verification
      See all API docs
  • Log in
  • Get Started Free

Custom website integration

Installation Instructions

This page shows how to add the AddressFinder auto-complete plugin to a custom address form.

The basic steps are:

  1. Generate the javascript code using our Javascript Code Generator
  2. Update the javascript with your address field ID's
  3. Paste the javascript into your form page and test

Step by step

  1. Determine what type of addresses you want to be collecting on your page. By default we provide postal, physical and PO Box type addresses but you can choose not to include the address types that don’t suit your needs.

  2. Determine what extra data (if any) you would like to collect along with each address. These may include Meshblock, GPS, DPID etc. See the full list

  3. Confirm you've got a license key. If you don't have one, just complete the Get a licence key form and then come back here and resume.

  4. Use our interactive Javascript Code Generator and generate your code.

  5. Once you have this javascript code you will need to customise it for the fields in your page. This involves replacing the ADDRESSFINDER_DEMO_KEY with your license key and entering your search, address and metadata field ids into the appropriate areas of this javascript.

    Your generated code should look something like this. The fields that you need to update are indicated.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
        <script>
          (function () {
            var widget, initAF = function () {
              widget = new AddressFinder.Widget(
                // Replace with the id of your search field
                document.getElementById('address_line_1'),
                // Replace with your license key
                'ADDRESSFINDER_DEMO_KEY',
                'NZ',
                {}
              );
              widget.on('result:select', function (fullAddress, metaData) {
                var selected = new AddressFinder.NZSelectedAddress(fullAddress, metaData);
    
                // Replace each of these fields with your address field ids
                document.getElementById('address_line_1').value = selected.address_line_1()
                document.getElementById('address_line_2').value = selected.address_line_2()
                document.getElementById('suburb').value = selected.suburb()
                document.getElementById('city').value = selected.city()
                document.getElementById('postcode').value = selected.postcode()
                document.getElementById('x').value = metaData.x;
                document.getElementById('y').value = metaData.y;
                document.getElementById('meshblock').value = metaData.meshblock;
              });
            };
    
            function downloadAF(f) {
              var script = document.createElement('script');
              script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
              script.async = true;
              script.onload = f;
              document.body.appendChild(script);
            };
    
            document.addEventListener('DOMContentLoaded', function () {
              downloadAF(initAF);
            });
          })();
        </script>
    
    • One option to help with this is to paste the Javascript into a codepen and make the field ID changes within this.

    • To find out the ID’s of each of your address fields, right click on each one and select ‘inspect’. The element will be highlighted. Copy the ID (as per below) and paste these into the appropriate place within your generated code. Repeat for each address and metadata field.

  6. Once the key, search field and all input fields have been updated, copy the code and paste it close to the bottom of your webpage just above the closing </body> tag

  7. Reload your page and give it a test. You should see suggestions returned nicely when you type address info into your search field. Select on one of the suggested addresses you should see all of your fields automatically populated with the correct address information.

Next steps

Get Started Free

Existing user? Get your licence key from the AddressFinder Portal.

  • JavaScript Widget
    • Integration guide
    • Widget code generator
    • Code examples
    • Best practices
    • Fixing browser quirks
    • Advanced usage
    • Can't find your address?
    • JavaScript widget reference
  • API Specs (NZ)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Address Reverse Geocode
    • Address Bounding Box
    • Location Autocomplete
    • Location Metadata
    • Points of Interest Autocomplete
    • Points of Interest Metadata
  • API Specs (AU)
  • Integrations
    • Magento
    • WooCommerce
    • BigCommerce
    • Salesforce
    • Shopify
    • Spiffy Stores
    • Ruby
    • iOS
    • Drupal
    • Microsoft Dynamics 365
    • Vue
    • Gravity Forms

Sitemap

Home

  • About
  • Contact
  • Blog
  • FAQ
  • Pricing
  • Case Studies
  • Status Page
  • Privacy Policy
  • Terms & Conditions

Features

  • Address Autocomplete
  • Address Verification
  • Address Metadata
  • Geocode Addresses
  • Reverse Geocode Addresses
  • Points of Interest
  • Street, Suburb & City Search
  • Bounding Box Search
  • Customer Portal

Plugins

  • WooCommerce
  • BigCommerce
  • Shopify
  • Magento
  • Salesforce
  • Spiffy Stores
  • iOS
  • Ruby

API Documentation

  • Address Autocomplete
  • Address Metadata
  • Address Verification
  • API Errors
  • Another 6 APIs
  • AU APIs specs

Widget Documentation

  • Integration Guide
  • Code Generator
  • Code Examples
  • Javascript Reference

Get Started Free

AddressFinder is also available in Australia