2023-03-27

Google Map Custom Markers from URL slow to load

Problem, markers take about 10 seconds to load despite the fact that they are very small icons. I'm sure there's a problem with the way I am calling them to load. I would expect them to be nearly instant. I have a working Google Maps example linked here. You'll see the markers download slowly. I have another example of this in FlutterMap which works fine and loads everything immediately. What do I have to do to get my markers to load all at once on the Google Map?

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:custom_marker/marker_icon.dart';
import '../../models/marker_collect_model.dart';

class PhotoCustomMap extends StatefulWidget {
  @override
  _PhotoCustomMapState createState() => _PhotoCustomMapState();
}

class _PhotoCustomMapState extends State<PhotoCustomMap> {
  List<Marker> list = [];
  List<String> listDocuments = [];

  Future<void> readDataFromFirebase() async {
    await Firebase.initializeApp();
    FirebaseFirestore firestore = FirebaseFirestore.instance;
    CollectionReference<Map<String, dynamic>> collectionReference =
    firestore.collection('NWNSPHOTOS2023');
    collectionReference.snapshots().listen((event) async {
      List<DocumentSnapshot> snapshots = event.docs;
      for (var map in snapshots) {
        Map<String, dynamic> data =
        map.data() as Map<String, dynamic>; // add this line
        MarkerCollectModel model =
        MarkerCollectModel.fromMap(data); // use data here
        String nameDocument = map.id;
        listDocuments.add(nameDocument);
        Marker marker = await createMarker(model, nameDocument);
        setState(() {
          list.add(marker);
        });
      }
    });
  }

  Future<Marker> createMarker(
      MarkerCollectModel markerCollectModel, String nameDocument) async {

    BitmapDescriptor bitmapDescriptor = await MarkerIcon.downloadResizePictureCircle(
        markerCollectModel.pathImageSmall!,
        addBorder: true,
        borderColor: Colors.blue,
        borderSize: 5,
        size: 50
    );


    Marker marker;
    marker = Marker(
      markerId: MarkerId(nameDocument),
      position: LatLng(markerCollectModel.lat!, markerCollectModel.lng!),
      icon: bitmapDescriptor,
    );
    return marker;
  }

  Set<Marker> myMarkers() {
    return list.toSet();
  }

  // Method
  @override
  void initState() {
    super.initState();
    readDataFromFirebase();
  }

  @override
  Widget build(BuildContext context) {
    WidgetsFlutterBinding.ensureInitialized();
    Firebase.initializeApp();
    CameraPosition cameraPosition =
    CameraPosition(target: LatLng(47.088717, -122.496509), zoom: 7.7);
    return Scaffold(
        body: Center(
            child: Stack(
              children: <Widget>[
                GoogleMap(
                  initialCameraPosition: cameraPosition,
                  markers: myMarkers(),
                ),
              ],
            )));
  }
}


No comments:

Post a Comment