FlutterFlow includes a built-in FlutterFlowGoogleMap widget that requires a Google Maps API key configured in Settings. Set the initial location, zoom level, and map type in the Properties Panel. Bind markers to a Firestore collection with latitude and longitude fields using the markers property. Handle On Marker Tap to show a detail Bottom Sheet. Apply custom map styling by pasting a JSON style from mapstyle.withgoogle.com into the Map Style property.
Adding Google Maps to Your FlutterFlow App
Maps are essential for location-based apps, delivery tracking, store locators, and real estate listings. FlutterFlow's built-in Google Map widget handles most use cases with Firestore marker binding and tap interactions. This tutorial covers setup, data binding, and styling.
Prerequisites
- A FlutterFlow project open in the builder
- A Google Cloud Platform account with Maps SDK enabled
- A Google Maps API key with Maps SDK for Android, iOS, and JavaScript enabled
- A Firestore collection with location documents containing lat/lng fields
Step-by-step guide
Configure your Google Maps API key in project Settings
Configure your Google Maps API key in project Settings
Go to Settings in the left Navigation Menu → Integrations → Google Maps. Paste your Google Maps API key. In Google Cloud Console, ensure Maps SDK for Android, Maps SDK for iOS, and Maps JavaScript API are all enabled for your project. Set API key restrictions if desired (HTTP referrers for web, app package for mobile). Without all three SDKs enabled, the map shows as a blank grey rectangle on some platforms.
Expected result: Google Maps API key is saved in Settings and all three Maps SDKs are enabled in Google Cloud Console.
Add the FlutterFlowGoogleMap widget and configure initial view
Add the FlutterFlowGoogleMap widget and configure initial view
Drag FlutterFlowGoogleMap from the Widget Palette onto your page. Set it inside a Container with an explicit height (e.g., 400px) — the map requires bounded height. In Properties Panel, set Initial Location to a specific lat/lng (e.g., your business location) or Current User Location. Set Initial Zoom to 14 for city-block level or 12 for district level. Set Map Type to normal (standard), satellite, or terrain.
Expected result: A Google Map renders on the page centered on the specified location at the configured zoom level.
Load markers from a Firestore locations collection
Load markers from a Firestore locations collection
Create a Firestore collection called locations with fields: name (String), latitude (double), longitude (double), description (String), category (String). Add several test documents with real coordinates. On the FlutterFlowGoogleMap widget, bind the Markers property to a Backend Query on the locations collection. Map each document's latitude and longitude to the marker position, and name to the marker title. FlutterFlow places a pin on the map for each document.
Expected result: Markers appear on the map at positions matching the Firestore location documents.
Handle On Marker Tap to show location details in a Bottom Sheet
Handle On Marker Tap to show location details in a Bottom Sheet
Create a Component called LocationDetailSheet with parameters: name (String), description (String), category (String). Design it with a drag handle, location name (Headline Small), category chip, and description text. On the FlutterFlowGoogleMap widget, configure the On Marker Tap action: Show Bottom Sheet → LocationDetailSheet → pass the tapped marker's associated document fields as parameters. This provides rich detail when users tap a map pin.
Expected result: Tapping a map marker opens a Bottom Sheet displaying that location's name, category, and description.
Apply custom map styling for a branded appearance
Apply custom map styling for a branded appearance
Go to mapstyle.withgoogle.com or snazzymaps.com and create or select a map style. Copy the JSON style string. In the FlutterFlowGoogleMap Properties Panel, paste the JSON into the Map Style property. The style changes road colors, label visibility, landmark display, and water color to match your brand. Dark mode apps benefit from a dark map style that matches the app background.
Expected result: The map renders with custom colors and styling matching your brand design.
Complete working example
1SETTINGS:2 Settings → Integrations → Google Maps → API Key: AIza...3 Google Cloud Console: Enable Maps SDK for Android, iOS, JavaScript45FIRESTORE DATA MODEL:6 Collection: locations7 name: String8 latitude: double (e.g., 37.7749)9 longitude: double (e.g., -122.4194)10 description: String11 category: String1213WIDGET TREE:14 Container (height: 400)15 └── FlutterFlowGoogleMap16 ├── Initial Location: LatLng(37.7749, -122.4194) or Current Location17 ├── Initial Zoom: 1418 ├── Map Type: normal19 ├── Map Style: [custom JSON from mapstyle.withgoogle.com]20 ├── Markers: Backend Query → locations collection21 │ Position: (doc.latitude, doc.longitude)22 │ Title: doc.name23 └── On Marker Tap:24 Show Bottom Sheet → LocationDetailSheet25 name: tappedMarker.name26 description: tappedMarker.description2728LOCATION DETAIL SHEET COMPONENT:29 Container (drag handle)30 Column31 Text (name, Headline Small)32 Chip (category)33 Text (description, Body Medium)Common mistakes when creating a Custom Map for Your FlutterFlow App
Why it's a problem: Forgetting to enable Maps SDK for all three platforms in Google Cloud Console
How to avoid: In Google Cloud Console, enable Maps SDK for Android, Maps SDK for iOS, AND Maps JavaScript API.
Why it's a problem: Not setting an explicit height on the map Container
How to avoid: Wrap the map in a Container with a specific height (300-500px) or use Expanded inside a Column.
Why it's a problem: Using the wrong API key type or missing restrictions
How to avoid: Create separate API key restrictions for each platform, or use one unrestricted key during development and add restrictions before production.
Best practices
- Enable all three Google Maps SDKs (Android, iOS, JavaScript) for cross-platform support
- Set explicit height constraints on the map Container to prevent layout errors
- Use Firestore for marker data so locations can be updated without app changes
- Add a custom map style that matches your app's brand colors and dark/light theme
- Show location details in a Bottom Sheet on marker tap for a clean user experience
- Set the initial zoom level based on your use case: 14 for local, 10 for city, 5 for country
- Restrict your API key in Google Cloud Console before publishing to production
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a Google Map to my FlutterFlow app that loads location markers from a Firestore collection with lat/lng fields. Show me how to configure the API key, set initial view, bind markers, handle tap events to show details, and apply custom map styling.
Add a Google Map widget to my page inside a 400px height container. Set the initial location to San Francisco and zoom level 14. I will bind markers from Firestore separately.
Frequently asked questions
Does Google Maps in FlutterFlow cost money?
Google provides $200/month free credit for Maps APIs. For most apps, this covers up to 28,000 map loads per month. Beyond that, pricing is $7 per 1,000 map loads.
Can I use the user's current location as the initial map center?
Yes. Set Initial Location to Current User Location in the Properties Panel. Ensure location permissions are enabled in your app settings.
Can I cluster markers when there are many close together?
FlutterFlow's built-in map does not support marker clustering. You need a Custom Widget using the google_maps_flutter package with the google_maps_cluster_manager package.
Does the map work in FlutterFlow web builds?
Yes. The Maps JavaScript API handles web rendering. Ensure you have enabled Maps JavaScript API in Google Cloud Console.
Can I draw a route between two points on the map?
Not with the built-in widget. Use a Custom Widget with polylines from the Google Directions API. See the map overlay tutorial for details.
Can RapidDev help build location-based features?
Yes. RapidDev can implement marker clustering, route drawing, geofencing, real-time location tracking, and custom map overlays.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation