Google Maps APIs Integration

Retool's Google Maps integration provides a convenient UI for connecting to and querying Google Maps Platform APIs.

Currently Retool supports the following APIs, with more coming soon.

Connecting to Google Maps

To build Retool apps with the Google Maps API you'll first need to create a resource to use for writing queries in Retool. Resources sit on top of our integrations and store the authentication and metadata fields required for you to connect to your data source.

Get started by navigating to the Resources page, clicking Create new, and then selecting Google Maps as your resource type.

Next, simply give your resource a unique name, enter your Google Maps API key and hit Create resource. Once the resource is created and you begin using it in your app, all users who open your app will be asked to grant Retool permission to make calls on their behalf.

If you have already created an API key for connecting to Google Maps you can retrieve it in the API Keys section of the Credentials page for your Google Cloud project. To create an API key follow the Creating API Keys guide in the Google Maps Platform documentation.

🚧

Enabling APIs

This resource requires the Google project associated with your API key to have enabled the Distance Matrix API, Elevation API, Geocoding API, Geolocation API, Roads API, and the Time Zone API. Use the Google Maps Platform dashboard to view enabled APIs and usage information.

Querying Google Maps

You can now select your newly-created Google Maps resource from the Resource dropdown when creating queries in your Retool apps.

To build a query select the desired API operation from the Operation dropdown. Note you can search through available operations by typing in the Operations dropdown field. Once you have selected an API operation a form will display the query and request body parameters available for the selected operation.

You can display the results of Google Maps queries as with any other query in Retool. You will have to examine the response to see which part of it you actually want to display. A good place to start looking is always in the top-level data field - {{yourQuery.data}}.


Did this page help you?