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(),
),
],
)));
}
}
Comments
Post a Comment