Custom Map Widget in FlutterFlow: Pins Not Showing in Browser Test Mode

Widgets & Design

Hello FlutterFlow Community,

I followed a YouTube tutorial by @Ali-Ideas to create a Custom Map Widget in FlutterFlow, which displays a Google Map with custom pins and clustered pins. The widget should render these pins dynamically from my Firestore collection.

However, when I test the app in the browser (Test Mode), I only see the default Google Maps map without any customizations or pins. My expectation was to see the custom pins on the map as described in the tutorial.

What have you tried so far?

1. Enabled the Canvas Kit under Web Deployment settings in FlutterFlow.

2. Checked my Firestore Collection and Documents, which contain the required Location field with Latitude and Longitude.

3. Verified that the API keys for Maps SDK for Android, Maps SDK for iOS, and Maps JavaScript API are active in the Google Cloud Console.

4. Implemented the Custom Map Widget code exactly as described in the tutorial.

I created a Gist for the custom widget code: https://gist.github.com/Benediktherlt/6953201260fc147a580191ba844bb9c3

Did you check FlutterFlow's Documentation for this topic?
Yes
3
1 reply