CODEWITHSUNDEEP
flutterdart
Hussain Mustafa
Hussain Mustafa

Reputation: 107

Flutter Network Image as Google Map Marker

I would like to add a network image as a marker on the google map I have on screen. The API does support a function Bitmapdescriptor.fromBytes(). However, I do not know how to use it with network images.

BitmapDescriptor.fromBytes(byteData);

Upvotes: 5

Views: 5165

Answers (3)

Kamla Saad
Kamla Saad

Reputation: 11

final response = await HttpClient().getUrl(Uri.parse(url));
final bytes = await response.close().then((response) =>
    response.fold<Uint8List>(Uint8List(0),
            (previous, current) => Uint8List.fromList(previous + current)));
return BitmapDescriptor.fromBytes(bytes, size: const Size(5, 5));

Upvotes: 0

Shailendra Rajput
Shailendra Rajput

Reputation: 2877

You can use this approach if you want to show multiple images.

First Import

import 'dart:ui' as ui;


GoogleMapController controller;
  BitmapDescriptor _markerIcon;
  final LatLng _kMapCenter = const LatLng(25.2744, 133.7751);
  final List<Marker> _marker = <Marker>[];
  @override
  void initState() {
    loadData();
    super.initState();
  }

  loadData() async {
    for (var element in AppConstant.list) {
      Uint8List image = await loadNetworkImage(element['url']);
      final ui.Codec markerImageCodec = await ui.instantiateImageCodec(
          image.buffer.asUint8List(),
          targetHeight: 150,
          targetWidth: 150);
      final ui.FrameInfo frameInfo = await markerImageCodec.getNextFrame();
      final ByteData byteData =
          await frameInfo.image.toByteData(format: ui.ImageByteFormat.png);
      final Uint8List resizedImageMarker = byteData.buffer.asUint8List();

      _marker.add(Marker(
          markerId: MarkerId(element['id']),
          icon: BitmapDescriptor.fromBytes(resizedImageMarker),
          position: LatLng(
            element['lat'],
            element['lon'],
          ),
          infoWindow: InfoWindow(title: element["title"])));
    }
    setState(() {});
  }

  Future<Uint8List> loadNetworkImage(path) async {
    final completed = Completer<ImageInfo>();
    var image = NetworkImage(path);
    image.resolve(const ImageConfiguration()).addListener(
        ImageStreamListener((info, _) => completed.complete(info)));
    final imageInfo = await completed.future;
    final byteData =
        await imageInfo.image.toByteData(format: ui.ImageByteFormat.png);
    return byteData.buffer.asUint8List();
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
    });
  }

Now Initialise Google Map like this

GoogleMap(
          myLocationEnabled: true,
          zoomGesturesEnabled: true,
          buildingsEnabled: true,
          cameraTargetBounds: CameraTargetBounds.unbounded,
          compassEnabled: true,
          scrollGesturesEnabled: true,
          rotateGesturesEnabled: true,
          tiltGesturesEnabled: true,
          zoomControlsEnabled: true,
          minMaxZoomPreference: MinMaxZoomPreference.unbounded,
          gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
            Factory<OneSequenceGestureRecognizer>(
              () => EagerGestureRecognizer(),
            ),
          },
          initialCameraPosition: CameraPosition(
            target: _kMapCenter,
            zoom: 2.0,
          ),
          markers: Set.from(_marker),
          onMapCreated: _onMapCreated,
        ),

Upvotes: 2

user10253151
user10253151

Reputation:

first import this :-

              import 'package:http/http.dart' as http;

main code :-

              var iconurl ="your url";
              var dataBytes;
              var request = await http.get(iconurl);
              var bytes = await request.bodyBytes;

              setState(() {
                dataBytes = bytes;
              });

              LatLng _lastMapPositionPoints = LatLng(
                  double.parse("22.7339"),
                  double.parse("75.8499"));

                _markers.add(Marker(
                  icon: BitmapDescriptor.fromBytes(dataBytes.buffer.asUint8List()),
                  markerId: MarkerId(_lastMapPositionPoints.toString()),
                  position: _lastMapPositionPoints,
                  infoWindow: InfoWindow(
                    title: "Delivery Point",
                    snippet:
                    "My Position",
                  ),
                ));

Upvotes: 5

Related Questions