JavaScript Location

Suburb, state and postcode suggestions on any input — a place picker rather than an address form. It ships in the same package as the JavaScript Autocomplete, looks the same, and needs no framework and no build step.

Install from NPM or CDN

npm install getaddress-au-autocomplete

<script src="https://cdn.getaddress.io/scripts/getaddress-au-autocomplete-1.5.1.js"></script>

Usage

<label for="suburb">Suburb</label>
<input id="suburb" type="text">

<label for="state">State</label>
<input id="state" type="text">

<label for="postcode">Postcode</label>
<input id="postcode" type="text">

<script>
    getAddressAu.location('suburb', '{your-domain-token}', {
        output_fields: {
            locality_name: 'suburb',
            state: 'state',
            postcode: 'postcode'
        }
    });
</script>

From npm:

import { location } from 'getaddress-au-autocomplete';

location('suburb', '{your-domain-token}', { /* options */ });

Suggestions are free and rate limited. Only resolving a picked place to its centre counts as a look-up; set enable_get: false if the printed "NORTHBRIDGE WA 6003" is all you need and the widget never spends one.

On a map

The picked place carries its centre, so it drops onto any map. This one is MapLibre with OpenFreeMap tiles, which need no key.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>

<input id="location" type="text">
<div id="map" style="height: 380px"></div>

<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/positron',
        center: [134, -28],
        zoom: 3
    });

    const marker = new maplibregl.Marker();

    getAddressAu.location('location', '{your-domain-token}', {
        selected: place => {
            const centre = [place.coordinates.longitude, place.coordinates.latitude];

            marker.setLngLat(centre).addTo(map);
            map.flyTo({ center: centre, zoom: 13 });
        }
    });
</script>

Events

input.addEventListener('getaddressau-location-suggestions', e => console.log(e.suggestions));
input.addEventListener('getaddressau-location-suggestion-selected', e => console.log(e.suggestion));
input.addEventListener('getaddressau-location-selected', e => console.log(e.location));
input.addEventListener('getaddressau-location-selected-failed', e => console.log(e.error.message));

Options

Option	Default	What it does
output_fields	–	Place fields to write into your form: field name → element id, CSS selector or element.
selected	–	Called with the place and its centre once resolved.
suggestion_selected	–	Called the moment a place is picked, before the look-up.
error	logs	Called when a request fails.
enable_get	true	Resolve the picked place. false keeps the widget entirely free.
set_input_value	true	Write the picked place's label back into the attached input.
min_characters	2	Characters before the first request.
debounce_ms	200	Quiet period before a request is sent. Left unset, it lengthens on a slow connection (up to 500). Set it to fix the delay.
max_suggestions	6	Maximum suggestions shown. The API returns at most 20.
state	–	Restrict to one state, e.g. "NSW".
postcode	–	Restrict to one postcode.
location	–	[latitude, longitude] to prefer places near. Nothing is excluded, and a domain token already prefers places near the visitor.
inject_styles	true	Inject the default stylesheet — the one the address widget uses.
class_names	–	Override the class names on the elements the widget creates.

Place fields

output_fields keys are the Get Location API's field names: id, location, locality_name, state and postcode — plus latitude and longitude for the centre.

Use a domain token, not an API key

Anything in browser JavaScript is readable by anyone who opens the page. A domain token is restricted to the domain you create it for, so publishing it costs you nothing. Create one in your console.