Using Google Maps API to build Autocomplete Functionality

Searching for locations in an app should feel effortless, whether you’re finding a business address, planning a delivery route, or logging a customer’s location. Traditionally, you’d have to type out the full address, hope it’s accurate, and then manually add it to your system. But with Google Maps Autocomplete and a dynamic map display, you can make that process fast, accurate, and intuitive.

In this post, I’ll walk you through how I used the Google Maps API to build a simple search with autocomplete, and show the result directly on a map. Whether you’re just starting out or you’ve been working with APIs for a while, you’ll see how easy it is to add this feature to your app—and how it can seriously level up your user experience.

Building the above functionality requires some initial setup, such as:

1. Creating a Retool account and project, this can be done here.
2. Signing up for the Google Maps API, and enabled the required APIs, this can be done here
3. Using the API key that you make in the Google Dev Console, to build a new Resource.

To build the correct Resource, follow these steps:

1. On your dashboard for your Retool App, click on “Resources” in the Navigation bar.
2. Press “Create New”, and select “Resource”.
3. From the list shown, search for the Google Maps resource.
4. Provide a name, as well as the API key you created.

After you create your resource, go to your App where you will be building this functionality. Let’s begin with the UI. 

Firstly, place a Text Input, and call it locationInput.

Next, place a Table, I place it under the locationInput to keep it neat. In the table, set the hidden attribute to:

{{!locationInput.value}}

This will hide the table if there is no text in the search box. You can style the table however you like, but I removed the column headers and footer, as well as the column borders. This can be found in the Advanced section of Appearance.

Next, place an IFrame component, with the URL set to:

https://www.google.com/maps/embed/v1/place?key={{ retoolContext.configVars.GOOGLE_MAPS_API_KEY }}&q=place_id:{{googleMapsAutocomplete.data.predictions[0].place_id}}

Let’s break this URL down:

First – https://www.google.com/maps/embed/v1/place – This is the URL for the Google Maps embed, this is what renders the UI.

Second – ?key={{ retoolContext.configVars.GOOGLE_MAPS_API_KEY }} – This is your API key, which you define in the Configuration Variables, in your settings, you can find a guide to do that here.

Last – &q=place_id:{{googleMapsAutocomplete.data.predictions[0].place_id}} – This is the first result that your Autocomplete query returns (don’t worry, we will set that up now).

Set the Hidden component to:

{{!locationInput.value}}

Just like your table, so it hides when no value is being searched for.

Next, create a new Resource Query, and call it googleMapsAutocomplete. Search for the name of the resource you created earlier, and set it to that.

Under “Operation”, select /maps/api/place/autocomplete/json

And then set the input* to your Input Box, we called it {{ locationInput.value }}

Ensure the query is set to Automatic. Now, whenever you search in your textbox, it will automatically run this query and provide predictions based on your search. Now, let’s hook up the table.

Set the Data source of the table to:

{{ googleMapsAutocomplete.data.predictions }}

Feel free to show/hide whichever columns you would like. In my instance, I only showed the “Description” column, and hid the rest. To get these columns to show, you will need to run the googleMapsAutocomplete query at least once. 

Next, there are 2 Event handlers that need to be set up. 

1. Create a “Click Row” Event, with the Action as “Control Component”. Use this to set the locationInput to the selectedRow.description.

2. Create a “Click Row” Event, with the Action as “Run Script”, and set the code to:

predictionsTable.setHidden()

3. OPTIONAL: The autocomplete query does not provide a latitude/longitude or google maps URL for the predictions, however, you can then run another query, like my “googleMapsGetDetails”, which fetches all the info about the selected prediction.

This is then called on a Click Row event on the table.

Now, give it a go. Type in the start of an address or establishment, and watch as your table fills with predictions. Click on one of them, and your Iframe will populate with the location.

Possible Errors:

1. If your API key is restricted, or does not have access to the needed APIs, you will receive this error.

2. If your Iframe does not render properly, you will need to ensure the Embed API is enabled in the Google Cloud Console.

And that’s it! With just a few components, a Google Maps API key, and a couple of queries, you can build a seamless autocomplete search and map display directly in Retool. Not only does this make finding locations faster and more intuitive for your users, but it also gives your app a clean and professional feel.

Whether you’re streamlining delivery address selection, helping your team log client locations, or building internal tools that rely on accurate mapping, adding Google Maps Autocomplete can save time and reduce errors. Plus, with Retool’s flexibility, you can expand on this setup—like pulling detailed place info, showing multiple locations, or even integrating routing.

If you run into any issues, double-check your API restrictions and ensure the required APIs are enabled in your Google Cloud Console. Once you’ve got that sorted, you’re good to go.