I am trying to create a custom google map widget with custom markers and on click marker action.
When I try to compile the code it says no function errors but shows a red box saying "unknown error" with a blank error screen. I have been stuck on this issue for days now. Any suggestions would be appreciated. This is my code
import 'package:google_maps_flutter/google_maps_flutter.dart'
as google_maps_flutter;
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui';
export 'dart:async' show Completer;
export 'package:google_maps_flutter/google_maps_flutter.dart' hide LatLng;
export '/flutter_flow/lat_lng.dart' show LatLng;
class FirestoreMap extends StatefulWidget {
const FirestoreMap({
Key? key,
this.width,
this.height,
this.places,
required this.centerLatitude,
required this.centerLongitude,
required this.showLocation,
required this.showCompass,
required this.showMapToolbar,
required this.showTraffic,
required this.allowZoom,
required this.showZoomControls,
required this.defaultZoom,
this.onClickMarker,
}) : super(key: key);
final double? width;
final double? height;
final List<PlaceRecord>? places;
final double centerLatitude;
final double centerLongitude;
final bool showLocation;
final bool showCompass;
final bool showMapToolbar;
final bool showTraffic;
final bool allowZoom;
final bool showZoomControls;
final double defaultZoom;
final Future Function(PlaceRecord? placeRow)? onClickMarker;
@override
State<FirestoreMap> createState() => _FirestoreMapState();
}
class _FirestoreMapState extends State<FirestoreMap> {
late google_maps_flutter.GoogleMapController _controller;
final Map<String, google_maps_flutter.BitmapDescriptor> _customIcons = {};
@override
void initState() {
super.initState();
_loadMarkerIcons();
}
Future<void> _loadMarkerIcons() async {
Set<String?> uniqueIconPaths =
widget.places?.map((data) => data.imageUrl).toSet() ?? {};
for (String? path in uniqueIconPaths) {
if (path != null && path.isNotEmpty) {
try {
if (path.contains("https")) {
Uint8List? imageData = await loadNetworkImage(path);
if (imageData != null) {
google_maps_flutter.BitmapDescriptor descriptor =
await google_maps_flutter.BitmapDescriptor.fromBytes(
imageData);
_customIcons[path] = descriptor;
}
} else {
google_maps_flutter.BitmapDescriptor descriptor =
await google_maps_flutter.BitmapDescriptor.fromAssetImage(
const ImageConfiguration(devicePixelRatio: 2.5),
"assets/images/$path",
);
_customIcons[path] = descriptor;
}
} catch (e) {
print("Error loading icon for path $path: $e");
}
}
}
_updateMarkers();
}
Set<google_maps_flutter.Marker> _createMarkers() {
var tmp = <google_maps_flutter.Marker>{};
for (int i = 0; i < (widget.places ?? []).length; i++) {
var place = widget.places?[i];
final google_maps_flutter.LatLng googleMapsLatLng =
google_maps_flutter.LatLng(
place?.latitude ?? 0.0, place?.longitude ?? 0.0);
google_maps_flutter.BitmapDescriptor icon =
_customIcons[place?.imageUrl] ??
google_maps_flutter.BitmapDescriptor.defaultMarker;
final google_maps_flutter.Marker marker = google_maps_flutter.Marker(
markerId:
google_maps_flutter.MarkerId('${place?.title ?? "Marker"}_$i'),
position: googleMapsLatLng,
icon: icon,
infoWindow: google_maps_flutter.InfoWindow(
title: place?.title, snippet: place?.description),
onTap: () async {
final callback = widget.onClickMarker;
if (callback != null) {
await callback(place);
}
},
);
tmp.add(marker);
}
return tmp;
}
void _updateMarkers() {
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: google_maps_flutter.GoogleMap(
onMapCreated: (controller) => _controller = controller,
initialCameraPosition: google_maps_flutter.CameraPosition(
target: google_maps_flutter.LatLng(
widget.centerLatitude, widget.centerLongitude),
zoom: widget.defaultZoom,
),
myLocationEnabled: widget.showLocation,
compassEnabled: widget.showCompass,
mapToolbarEnabled: widget.showMapToolbar,
trafficEnabled: widget.showTraffic,
zoomGesturesEnabled: widget.allowZoom,
zoomControlsEnabled: widget.showZoomControls,
markers: _createMarkers(),
),
);
}
Future<Uint8List?> loadNetworkImage(String imageUrl) async {
try {
final response = await http.get(Uri.parse(
'https://images.pexels.com/photos/1954524/pexels-photo-1954524.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'));
if (response.statusCode == 200) {
return response.bodyBytes;
} else {
print("Failed to load network image: ${response.statusCode}");
}
} catch (e) {
print("Error loading network image: $e");
}
return null;
}
}
class PlaceRecord {
final double latitude;
final double longitude;
final String? title;
final String? description;
final String? imageUrl;
PlaceRecord({
required this.latitude,
required this.longitude,
this.title,
this.description,
this.imageUrl,
});
}
