Retrieve Markers from Firebase Realtime database and display on Map

38 Views Asked by At

I have data stored on Realtime database on Firebase. I want to display those markers on my map. Im using Flutter, google_maps_flutter package. I have to display those latitude and longitude coordinates as Position of markers.

Firebase RTB

{
  "Rooms": {
    "-NlRyq2YpbOVTbI2G4nb": {
      "latitude": "12.901715224349228",
      "longitude": "74.98462345451117",
      "roomLocation": "new",
      "roomName": "new"
    },
    "-NlRz4ZDgp5IUOLA9J4w": {
      "latitude": "12.899229153743564",
      "longitude": "74.9857271835208",
      "roomLocation": "right",
      "roomName": "right"
    }
  }
}

Where am I going wrong?


  final databaseReference = FirebaseDatabase.instance.ref().child('Rooms');

  @override
  void initState() {
    super.initState();
    _fetchMarkers();
  }

      void _fetchMarkers() {
    databaseReference.child('Rooms').once().then((DataSnapshot snapshot) {
      Map<dynamic, dynamic> values = snapshot.value as Map<dynamic, dynamic>;

      values.forEach((key, values) {
        markers.add(Marker(
          markerId: MarkerId(key),
          position: LatLng(
            double.parse(values['latitude'].toString()),
            double.parse(values['longitude'].toString()),
          ),
          infoWindow: InfoWindow(
            title: values['roomName'].toString(),
            snippet: values['roomLocation'].toString(),
          ),
        ));
      });

      setState(() {});
        });
  }

Widget Build

       GoogleMap(
                  onMapCreated: onMapCreated,
                  initialCameraPosition: _kGooglePlex,
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,
                  // markers: Set.from(_markers),

                  markers: markers,
                ),

Im getting this error

The argument type 'Null Function(DataSnapshot)' can't be assigned to the parameter type 'FutureOr Function(DatabaseEvent)'.

Im trying to get multiple markers to be displayed on the map.

1

There are 1 best solutions below

0
On

Solved.

  DatabaseReference databaseReference = FirebaseDatabase.instance.ref();

  Set<Marker> markers = {};

  @override
  void initState() {
    super.initState();
    _fetchMarkers();
  }

  _fetchMarkers() {
    databaseReference.child('Rooms').get().then((DataSnapshot snapshot) {
      Map<dynamic, dynamic> values = snapshot.value as Map<dynamic, dynamic>;

      values.forEach((key, values) {
        markers.add(Marker(
          markerId: MarkerId(key),
          position: LatLng(
            double.parse(values['latitude'].toString()),
            double.parse(values['longitude'].toString()),
          ),
          infoWindow: InfoWindow(
            title: values['roomName'].toString(),
            snippet: values['roomLocation'].toString(),
          ),
        ));
      });

      setState(() {
        // markers = markers;
      });
    });

    return markers;
  }