Display an image retrieved from the internet on Google Maps

Custom Code

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;
  }
}
What have you tried so far?

I referred to the documentation and researched whether it is possible to implement this using existing widgets.

Did you check FlutterFlow's Documentation for this topic?
Yes
1