How can use GoogleMap and get data put into array from firestore database?

Now I can used default data and realize used marker in GoogleMap, but I need to get data from firestore database, so how could I did?

in my code,

final Completer<GoogleMapController> _controller = Completer();

  List<String> images = [
    'assets/accomodation.png',
    'assets/beach.png',
    'assets/boat.png',
    'assets/campsite.png',
  ];

  Uint8List? markerImage;
  final List<Marker> _markers = <Marker>[];
  final List<LatLng> _latLang = <LatLng>[
    LatLng(33.6941, 72.9734),
    LatLng(33.7008, 72.9682),
    LatLng(33.6992, 72.9744),
    LatLng(33.6939, 72.9771),
    LatLng(33.6910, 72.9807),
    LatLng(33.7036, 72.9785)
  ];

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(33.6910, 72.98072),
    zoom: 15,
  );

  Future<Uint8List> getBytesFromAsset(String path, int width) async {
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
        .buffer
        .asUint8List();
  }

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

  loadData() async {
    for (int i = 0; i < images.length; i  ) {
      final Uint8List markerIcon =
          await getBytesFromAsset(images[i].toString(), 100);
      _markers.add(Marker(
          markerId: MarkerId(i.toString()),
          position: _latLang[i],
          icon: BitmapDescriptor.fromBytes(markerIcon),
          infoWindow: InfoWindow(title: 'The title of the marker')));
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: mobileBackgroundColor,
        centerTitle: false,
        title: SvgPicture.asset(
          'assets/yomate_new_logo.svg',
          color: primaryColor,
          height: 32,
        ),
      ),
      body: SafeArea(
        child: GoogleMap(
          initialCameraPosition: _kGooglePlex,
          mapType: MapType.normal,
          myLocationButtonEnabled: true,
          myLocationEnabled: true,
          markers: Set<Marker>.of(_markers),
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
        ),
      ),
    );
  }

Can give me idea?

I tried to use this methods, but I have not any idea and get error.....

final List<LatLng> _latLang = <LatLng>[];


loadData() async {
    await FirebaseFirestore.instance.collection('Campsite').get().then(
      (value) {
        setState(() {
          List.from(value.data['CamperSiteLatitude']).forEach((element) {
            LatLng data = new LatLng(element);
            _latLang.add(data);
          });
        });
      },
    );
  }

This is my data format... every data has CamperSiteLatitude & CamperSiteLongitude

And could I custom markerIcon? if the data type is campsite, I hope can show assets/campsite.png, the data type is accomodation show assets/accomodation.png', the data type is beach show assets/beach.png', the data type is boat ramp show 'assets/boat.png'

CodePudding user response：

tried this one

loadData() async {
    final Uint8List markerIcon =
        await getBytesFromAsset('assets/campsite.png', 100);
    await FirebaseFirestore.instance.collection('Campsite').get().then(
      (querySnapshot) {
        querySnapshot.docs.forEach((element) {
          _markers.add(
            Marker(
              markerId: MarkerId(element.data()['CamperSiteID']),
              position: LatLng(element.data()['CamperSiteLatitude'],
                  element.data()['CamperSiteLongitude']),
              icon: BitmapDescriptor.fromBytes(markerIcon),
              infoWindow: InfoWindow(
                title: element.data()['CamperSiteName'],
              ),
            ),
          );
          setState(() {});
          print(element.data()['type']);
        });
      },
    );
  }