Back to Browse

Flutter Flow: Google Maps Custom Markers using Firebase Firestore

2.5K views
Mar 23, 2024
8:33

In this video, I show you how to add custom markers to Google Maps using Firestore. You can also get the code and step-by-step instructions in the articles: https://codewhims.com/articles/flutter-flow-google-map-custom-markers-with-firebase or https://coffeebytez.substack.com/p/flutter-flow-google-map-custom-markers-with-firebase-8f48481d1f4a This is also integrated in the free FlutterFlow custom map template: https://marketplace.flutterflow.io/item/zeSFD2KlIXUOfcXYwi1e Custom map template instructions: https://codewhims.com/articles/flutter-flow-map-template-update-library-migration You can generate any widget including maps with custom markers, polylines, polygons, etc at https://codewhims.com/ Medium article: https://coffeebytez.medium.com/flutter-flow-google-map-custom-markers-with-firebase-8f48481d1f4a Join the Coffee Bytez Patreon for exclusive content: https://patreon.com/coffeebytez Substack: https://coffeebytez.substack.com/ Medium: https://medium.com/@coffeebytez Discord: https://discord.gg/xQFhrHRz #nocode #flutterflow #dartprogramming #firebase 📖 Chapters: 0:00:00 - Introduction to Custom Google Maps Markers with Firebase Firestore 0:00:29 - Demonstration of the Live Custom Markers Map 0:00:45 - Setting Up Firebase and Firestore Database 0:01:07 - Adding Data to Firestore Database (Place Collection Fields) 0:01:24 - Discussion on Using Geopoint for Latitude and Longitude 0:02:25 - Creating a Custom Widget in FlutterFlow ('FirestoreMap') 0:02:50 - Configuring Firestore Schema in FlutterFlow 0:03:26 - Defining Parameters for the Custom Widget 0:04:19 - Adding Google Maps Dependencies 0:04:40 - Reviewing Custom Code for Separate Lat/Long Fields 0:04:55 - Reviewing Custom Code for Geopoint Field 0:05:11 - Using the New Custom Map Widget on a Page 0:06:17 - Setting Up Backend Query to Fetch Place Documents 0:06:40 - Configuring Custom Widget Properties 0:07:38 - Implementing onClickMarker Callback to Update Page State 0:08:19 - Final Review of Page State Variable Setup

Download

0 formats

No download links available.

Flutter Flow: Google Maps Custom Markers using Firebase Firestore | NatokHD