CODEWITHSUNDEEP
flutterdart
NinFudj
NinFudj

Reputation: 129

how to format snapshots from firebase to list or set markers for map

How can I store firebase data so that I can use it for markers on a googlemap?

late CollectionReference vendorLocCollection =  
FirebaseFirestore.instance.collection('vendorlocations');
late List vendors = [];

Future <void> populateVendors() async {

    Map<dynamic, dynamic> marker = <MarkerId, Marker> {};  //from dynamic in snapshot to marker

    final _vendorSnapshots = await vendorLocCollection.snapshots();

    _vendorSnapshots.listen((result) {
                                      result.docs.forEach((result) {  //how do i extract the result so i can use
                                                                      // it as marker? :
                                                                    vendors.add(result.data());
                                                                    print(vendors);

                                                                   });
                                      });
  }

enter image description here

Upvotes: 0

Views: 101

Answers (1)

nicks101
nicks101

Reputation: 1201

Parsing firebase snapshot results and putting markers on Google Maps are two different things.

Step 1: Serialise the data

Since we get the data in JSON format, we first change it to dart data types. We can use something like this.

class VendorLocations {
  String uid;
  double latitude;
  double longitude;

  VendorLocations(this.uid, this.latitude, this.longitude);

}

...

vendors = (result.data() as List)
          .map((e) {
             return VendorLocations(e['uid'], e['latitude'], e['longitude']);
           })
          .toList();

Step 2: Put marker on Google Map

Create marker objects from the vendors list.

final markerId = vendors[0].uid; /// or something else

final Marker m = Marker(
  markerId: markerId,
  position: LatLng(
    vendors[0].latitude,
    vendors[0].longitude,
  ),
  /// specify other parameters as needed
);

marker[markerId] = m;

// update UI

This creates a new marker. All the markers can be added by running the above code snippet in a loop.

Reference : google_maps_flutter

Upvotes: 1

Related Questions