Google Places API Address Autocomplete with Directus Autocomplete Input (API) Interface

Help
1

Hello,

I’m trying to integrate the Google Places API Autocomplete
Google Places Autocomplete API

With the Directus Autocomplete Interface.
Directus Autocomplete Input (API) Interface

I did the following, but it doesn’t work, and I don’t know where to debug it. Any advice on what setting could be wrong or something I’m missing? Where can I go to view any errors that are being produced?



To configure this Autocomplete Input (API) in Directus to use Google Places Autocomplete, follow these exact steps:

:white_check_mark: 1. Set Your Google Places API URL

In the URL field, enter:

https://maps.googleapis.com/maps/api/place/autocomplete/json?input={{value}}&types=address&key=YOUR_API_KEY

Replace YOUR_API_KEY with either:

  • Your actual API key (less secure), or
  • A reference to an environment variable like {{env.GOOGLE_MAPS_API_KEY}} if your Directus instance supports it in the UI field.

:white_check_mark: 2. Results Path

predictions

This points to the array in the API response where suggestions live.

:white_check_mark: 3. Text Path

description

This is what gets shown in the dropdown.

:white_check_mark: 4. Value Path

place_id

This is the raw value stored in the field (e.g., for geocoding later).

:white_check_mark: 5. Trigger:

Leave as Throttle

:white_check_mark: 6. Rate:

Set to 500 (default)

:white_check_mark: 7. Optional Placeholder:

You can set something like:

Start typing an address...

:white_check_mark: Example of Google API Response

Google returns:

{
  "predictions": [
    {
      "description": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
      "place_id": "ChIJ2eUgeAK6j4ARbn5u_wAGqWA"
    }
  ]
}

So:

  • description → what users see
  • place_id → what you can later use in a geocoding step

:repeat_button: Optional Follow-Up

If you want to get the actual lat/lng from that place_id, you’d use the Place Details API with another flow:

https://maps.googleapis.com/maps/api/place/details/json?place_id=PLACE_ID&key=YOUR_API_KEY
2

Hi Jay! :wave:

You should be able to debug any errors within the console from the developer tools within the browser.

I haven’t done much work trying to test using the Google API with the standard autocomplete interface, but if you haven’t seen it, we do have an address completion interface extension as part of the Directus Labs extensions.

Directus Labs Address Extension

Check out the Address Completion Interface extension - it’s specifically built for address autocomplete functionality and might be exactly what you’re looking for.

This could save you a lot of custom development work if it fits your use case!