Google Maps API

Go to console.cloud.google.com and create a new project (or select an existing one). Attach a billing account — this is required even for usage within the free tiers. Without a billing account, all Maps API calls return REQUEST_DENIED regardless of key validity. In the left menu, go to APIs & Services → Library. Search for and enable the following APIs one by one — each click takes you to the API's page where you click 'Enable': - Maps SDK for Android (required for the Android build of your app) - Maps SDK for iOS (required for the iOS build) - Maps JavaScript API (required if you build a FlutterFlow web app) - Places API (required for address autocomplete and nearby search) - Geocoding API (required for address-to-coordinate conversion) - Directions API (required for routing) Only enable the SKUs you actually plan to use — each enabled SKU is independently billed if usage exceeds its free tier. If you enable Directions but never call it, there is no cost. Enabling is reversible at any time. After enabling each API, go to APIs & Services → Dashboard to confirm they appear in your 'Enabled APIs' list. This list is your reference for troubleshooting REQUEST_DENIED errors.

In Google Cloud Console, go to APIs & Services → Credentials and click '+ Create Credentials → API Key'. An unrestricted key will be created. Click 'Edit API Key' to add restrictions. For Android: under 'Application restrictions', select 'Android apps'. Add your app's package name (e.g., com.yourcompany.myapp) and the SHA-1 fingerprint of your keystore. You can find your debug SHA-1 by running `keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore` in a terminal (outside FlutterFlow). Create a separate key for your release keystore when you are ready to publish. For iOS: create a separate API key. Under 'Application restrictions', select 'iOS apps'. Add your app's bundle ID (e.g., com.yourcompany.myapp). For web: create a third API key. Under 'Application restrictions', select 'HTTP referrers (web sites)'. Add your deployed app's domain (e.g., https://yourdomain.com/*). Platform restrictions are the single most important security step. An unrestricted key embedded in a compiled Flutter app can be extracted from the APK and used to run up charges on your billing account — this is the #1 Google Maps abuse vector. Many developers skip key restriction during development and forget to add it before launch. After creating the keys, you can optionally add 'API restrictions' (limit each key to only the specific SKUs it needs) as an additional layer of defense. Name your keys clearly: 'MyApp Android Key', 'MyApp iOS Key', 'MyApp Web Key'.

In FlutterFlow, click the Settings gear icon in the left nav, then select Project Setup → API Keys (or navigate to Settings & Integrations → Google Maps). You will see three key fields: Android API Key, iOS API Key, and Web API Key. Paste the corresponding platform-restricted API key into each field. FlutterFlow uses these keys when it compiles your app: the Android key is embedded in the AndroidManifest.xml, the iOS key is embedded in AppDelegate.swift, and the web key is included in the web build configuration. FlutterFlow handles all of this automatically — you do not need to edit any config files manually. After pasting the keys, return to any page in your FlutterFlow project. Open the Widget Palette from the left nav, scroll to Maps, and drag the Google Map widget onto your page. Set a width (use 100% or a fixed pixel value) and height (300-400 px is a good starting point). In the canvas, the map may show a grey placeholder — switch to Run mode to see it render with tiles. In the Google Map widget's settings panel on the right, you can configure: Initial Location (hardcoded lat/lng or bound to Page State), Initial Zoom Level (13-15 is good for a city neighborhood), Map Type (Normal, Satellite, Terrain, Hybrid), and whether to show the user's current location dot (enable 'Show My Location' and grant location permissions in Settings → Permissions).

The native Google Map widget handles rendering but does not include a search bar. For address autocomplete, you need an API Call to the Places API Autocomplete endpoint. Click API Calls in the left nav, then + Add → Create API Call. Name it 'PlacesAutocomplete'. Set Method to GET and URL to https://maps.googleapis.com/maps/api/place/autocomplete/json. In the Query Parameters tab, add: input (bound to variable searchText), key (hardcoded to your API key — this is a public key, so embedding it as a query param is acceptable if the key is HTTP-referrer or iOS/Android restricted), and optionally types with value geocode to limit results to address entries. In Response & Test, paste a test call with a partial address (e.g., 'Eiffel') and generate JSON Paths. The key paths are $.predictions[*].description (the full display string for autocomplete suggestions) and $.predictions[*].place_id (needed to get full coordinates). Create a second API Call named 'PlaceDetails' to get the coordinates of a selected prediction. URL: https://maps.googleapis.com/maps/api/place/details/json. Query params: place_id (bound to a variable) and key. Response JSON Paths: $.result.geometry.location.lat and $.result.geometry.location.lng. On your map page, add a TextField and a ListView of autocomplete suggestions. When the user types, trigger PlacesAutocomplete and populate the suggestion list. When they select a suggestion, trigger PlaceDetails with the place_id to get lat/lng, then update the Page State variables bound to the Google Map widget's Initial Location to pan the map.

1// Places Autocomplete API Call config
2// Method: GET
3// URL: https://maps.googleapis.com/maps/api/place/autocomplete/json
4// Query params:
5//   input = {{searchText}}
6//   key   = YOUR_API_KEY
7//   types = geocode  (optional: restrict to addresses)
8// Response JSON Paths:
9//   $.predictions[*].description  → suggestion display text
10//   $.predictions[*].place_id     → ID to fetch coordinates
11
12// Place Details API Call config
13// Method: GET
14// URL: https://maps.googleapis.com/maps/api/place/details/json
15// Query params:
16//   place_id = {{placeId}}
17//   fields   = geometry
18//   key      = YOUR_API_KEY
19// Response JSON Paths:
20//   $.result.geometry.location.lat
21//   $.result.geometry.location.lng

Before going to production with any Google Maps integration, two tasks are non-negotiable: billing alerts and key restrictions. For billing alerts: go to Google Cloud Console → Billing → Budgets & Alerts. Create a budget for your project with a monthly cap (start with $10-20 for a small app). Set alerts at 50%, 90%, and 100% of the budget — Google will email you as usage climbs. Without an alert, a misconfigured or scraped API key can run up hundreds of dollars in charges before you notice. For key restrictions (if not already done): go back to APIs & Services → Credentials and verify that every key used in production is platform-restricted. Test each key by attempting to use it from a different platform — the Android key should fail if called from a browser, and the iOS key should fail if called from an Android device. This verification step catches keys that were accidentally left unrestricted. For the Places and Geocoding API Calls in FlutterFlow, the API key is embedded in the query string. If you are concerned about key visibility in web builds, consider routing these calls through a Firebase Cloud Function or Supabase Edge Function proxy that holds the key server-side and returns results to the app. For mobile-only builds with a properly restricted Android/iOS key, embedding the key as a query param is the standard and accepted approach — the platform restriction itself is the security control. Finally, monitor your API usage in Google Cloud Console → APIs & Services → Dashboard. Click any enabled API to see call counts, error rates, and latency over time. This dashboard is where you will spot unexpected usage spikes or REQUEST_DENIED rates that indicate a configuration problem.