Google Maps

From here, you can add the keys required for displaying Google Maps in your app.

Getting API Keys

Acquiring the API keys comprises the following steps:

1. Enabling the Maps API on Google Developer Console

Enabling Maps API allows you to access the Google Maps servers. To do that:

  1. Click here to open the Google Developers Console. (Make sure your project is selected in the dropdown at the top)

  2. Click on the Library menu on the left.

  3. Search for Maps.

  4. You'll see options like Maps SDK for iOS, Maps SDK for Android, and Maps Javascript API. Select the platform you want to support and then click Enable. Note: The Maps Javascript API is required to test the Google Maps in FlutterFlow Run-mode.

2. Add Keys to FlutterFlow

Adding API keys allows your app to communicate with the Google server. To add the API keys:

  1. Open the Google Developers Console. (Make sure your project is selected in the dropdown at the top)

  2. Click the Credentials menu on the left.

  3. Return to your FlutterFlow project, and navigate to Settings and Integrations > Integrations > Google Maps.

  4. Paste the Android API Key.

  5. Similarly, copy the iOS key (auto created by Firebase) and Browser key (auto created by Firebase) from the Google developer console and paste it into the iOS API Key and Web API Key respectively.

If you don't find the Android key (auto created by Firebase) or iOS key (auto created by Firebase) in the Google developer console, Here are the steps to create one.

  1. Open the Google Developers Console. (Make sure your project is selected in the dropdown at the top)

  2. Click the Credentials menu on the left.

  3. Click on the + Create Credentials at the top.

  4. Click on the API key to create a new key for the Android app.

  5. Similarly, create one for the iOS and Browser as well.

After adding the keys, you can continue to add the Google Map widget to your page.


Last Updated Date: March 22, 2024

Last updated