I want to display an image retrieved from the internet on Google Maps using a custom widget. I tried using BitmapDescriptor
, but it seems like a transparent image is being displayed. I'll attach part of the source code, so if anyone can help, I would appreciate it. Thank you!
class _CustomMapState extends State<CustomMap> {
final Completer<google_maps_flutter.GoogleMapController> _controller =
Completer();
Map<String, google_maps_flutter.BitmapDescriptor> _customIcons = {};
Set<google_maps_flutter.Marker> _markers = {};
late google_maps_flutter.LatLng _center;
String photoUrl =
"https://bcw-media.s3.ap-northeast-1.amazonaws.com/text_to_image_jp_topbanner_mb_1_11e2f55762.jpg";
@override
void initState() {
super.initState();
_center = google_maps_flutter.LatLng(widget.centerLat, widget.centerLng);
_loadMarkerIcons();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: google_maps_flutter.GoogleMap(
onMapCreated: _onMapCreated,
zoomGesturesEnabled: widget.allowZoom,
zoomControlsEnabled: widget.showZoomControls,
myLocationEnabled: widget.showLocation,
compassEnabled: widget.showCompass,
mapToolbarEnabled: widget.showMapToolbar,
trafficEnabled: widget.showTraffic,
initialCameraPosition: google_maps_flutter.CameraPosition(
target: _center,
zoom: 14.0,
),
markers: _markers,
),
);
}
Future<void> _loadMarkerIcons() async {
Set<String> uniqueIconPaths = {photoUrl};
for (String path in uniqueIconPaths) {
if (path.isNotEmpty) {
Uint8List? imageData = await loadNetworkImage(path);
if (imageData != null) {
google_maps_flutter.BitmapDescriptor descriptor =
google_maps_flutter.BitmapDescriptor.fromBytes(imageData);
_customIcons[path] = descriptor;
}
}
}
_updateMarkers();
}
Future<Uint8List?> loadNetworkImage(String path) async {
final completer = Completer<ImageInfo>();
var image = NetworkImage(path);
image.resolve(const ImageConfiguration()).addListener(ImageStreamListener(
(ImageInfo info, bool _) => completer.complete(info),
));
final imageInfo = await completer.future;
final resizedImage = await _resizeImage(imageInfo.image);
final byteData =
await resizedImage.toByteData(format: ui.ImageByteFormat.png);
return byteData?.buffer.asUint8List();
}
Future<ui.Image> _resizeImage(ui.Image image) async {
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder);
final paint = Paint();
canvas.drawImageRect(
image,
Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
Rect.fromLTWH(0, 0, 100, 100),
paint,
);
final picture = recorder.endRecording();
final img = await picture.toImage(100, 100);
return img;
}
void _updateMarkers() {
setState(() {
_markers = _createMarkers();
});
}
void _onMapCreated(google_maps_flutter.GoogleMapController controller) {
_controller.complete(controller);
}
Set<google_maps_flutter.Marker> _createMarkers() {
var tmp = <google_maps_flutter.Marker>{};
widget.locationPostList.forEach((locationPost) {
final latlng.LatLng coordinates =
locationPost.postLocation as latlng.LatLng;
final google_maps_flutter.LatLng googleMapsLatLng =
google_maps_flutter.LatLng(
coordinates.latitude, coordinates.longitude);
google_maps_flutter.BitmapDescriptor icon = _customIcons[photoUrl] ??
google_maps_flutter.BitmapDescriptor.defaultMarker;
final google_maps_flutter.Marker marker = google_maps_flutter.Marker(
markerId: google_maps_flutter.MarkerId("ID"),
position: googleMapsLatLng,
icon: icon,
infoWindow: google_maps_flutter.InfoWindow(
title: "タイトル",
snippet: "説明",
),
);
tmp.add(marker);
});
return tmp;
}
}