Skip to content
Advertisement

Google Places Autocomplete API – Abbreviate Cardinal Direction on input

I’m using Google Places Autocomplete for looking up addresses, and I want users to be able to type abbreviations for the cardinal directions in their street addresses.

For example, my users have to type “north” out completely (eg 123 “north” willow lane), instead of just “n” (eg 123 “n” willow lane). Users try to type “n” “s” “e” “w” most of the time, and think our autocomplete is broken because the autocomplete is expecting the full typed-out cardinal direction.

Is there a setting in the places API that toggles this configuration? Substring matching?

https://developers.google.com/maps/documentation/places/web-service/autocomplete#PlaceAutocompleteMatchedSubstring


Here is my current code:

I’m using Javascript.

Importing the autocomplete:

  async mounted() {
    const maps = await this.$GMaps()
    this.autocompleteService = new maps.places.AutocompleteService()
  },

Using autocomplete to get predictions:

this.autocompleteService.getPlacePredictions({ input: searchAddress }, (predictions) => {
        this.addressPredictions = predictions
      })

(I’m using Nuxt / Vue)

Advertisement

Answer

This had nothing to do with google autocomplete. Console.logging showed results were returned with abbreviated cardinal directions.

Instead, this was a problem with Vuetify’s v-autocomplete filtering out the desired suggestions. V-autocomplete can be configured with the “no-filter” prop to show these results

Advertisement