# How to Create a Custom Map for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: FlutterFlow Free+ (Google Maps API key required)
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `FlutterFlow Google Map Setup`

```text
SETTINGS:
  Settings → Integrations → Google Maps → API Key: AIza...
  Google Cloud Console: Enable Maps SDK for Android, iOS, JavaScript

FIRESTORE DATA MODEL:
  Collection: locations
    name: String
    latitude: double (e.g., 37.7749)
    longitude: double (e.g., -122.4194)
    description: String
    category: String

WIDGET TREE:
  Container (height: 400)
    └── FlutterFlowGoogleMap
          ├── Initial Location: LatLng(37.7749, -122.4194) or Current Location
          ├── Initial Zoom: 14
          ├── Map Type: normal
          ├── Map Style: [custom JSON from mapstyle.withgoogle.com]
          ├── Markers: Backend Query → locations collection
          │     Position: (doc.latitude, doc.longitude)
          │     Title: doc.name
          └── On Marker Tap:
                Show Bottom Sheet → LocationDetailSheet
                  name: tappedMarker.name
                  description: tappedMarker.description

LOCATION DETAIL SHEET COMPONENT:
  Container (drag handle)
    Column
      Text (name, Headline Small)
      Chip (category)
      Text (description, Body Medium)
```

## Common mistakes

- **Forgetting to enable Maps SDK for all three platforms in Google Cloud Console** — The map shows as a blank grey rectangle on any platform where the SDK is not enabled. Enabling only Android leaves iOS and web broken. Fix: In Google Cloud Console, enable Maps SDK for Android, Maps SDK for iOS, AND Maps JavaScript API.
- **Not setting an explicit height on the map Container** — The Google Map widget needs bounded height constraints. Without them, it either crashes with a layout error or renders at zero height (invisible). Fix: Wrap the map in a Container with a specific height (300-500px) or use Expanded inside a Column.
- **Using the wrong API key type or missing restrictions** — A restricted API key that only allows web referrers will not work on mobile, and vice versa. An unrestricted key is a security risk. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-map-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-map-for-your-flutterflow-app