Geocoder.ca address autocomplete

Start typing a Canadian address, e.g. 1435 prince or 330 metcalfe. Pick a suggestion with the mouse or the arrow keys and Enter.

Street address

Suggestions come from the Geocoder.ca autocomplete API. Each lookup uses credits.

Address fields

Filled by geocoding the chosen suggestion with standard=1&showpostal=1. You can still edit them by hand.

Number

Street

City

Province

Postal code

Confidence

Latitude

Longitude

Raw geocode response

Installation

<script src="https://geocoder.ca/geocoderAutocompleteJs-main/autocomplete.min.js?v=1.0.0"></script>

Usage

Add an ordinary input. It keeps its id, name, classes and any listeners you attach; the widget wraps it rather than replacing it.

<input id="address" name="address">

<script>
  new GeocoderAutocomplete({
    input: '#address',
    key: 'YOUR_API_KEY',
    onSelect: function (address) {
      console.log('Picked', address);
    }
  });
</script>

You can also listen for the geocoder:select event on the input. Code written for v0 (new autocomplete({...}), itemtemplate, debouncethreshold) keeps working.

Options

Option	Default	Description
`input`	required	The `<input>` element, or a CSS selector for it.
`key`	`'test'`	Your API key from geocoder.ca/api.
`onSelect`	none	`function(address, detail)`, called when a suggestion is picked.
`minLength`	`3`	Characters typed before the first request.
`debounce`	`300`	Milliseconds to wait after typing stops.
`itemtemplate`	address	HTML for each suggestion. Placeholders: `{{geocodeaddr}}` (HTML-escaped), `{{geocodeaddr_url}}` (URL-encoded, for links), `{{geocodeaddr_marked}}` (typed text in bold).
`noResultsText`	"No matching addresses"	Shown when nothing matches; set to `''` to hide the list instead.
`onError`	console warning	`function(error)` for network or API errors.
`injectStyles`	`true`	Set to `false` to style `.gac-*` classes yourself.

Colours can be themed with CSS variables such as --gac-accent, --gac-bg and --gac-active-bg.

Download

Download source (.tar.gz)