Flutter: Google Maps how to set icon from Firestore

Question

I have page with Google Maps. In it i show a lot of markers. I use FireStore to store marker data such as latlng, title and icon. Latlng and Title working fine, i managed to display my markers from Firestore into my App. Now i want to display my icons as well. Icon node stored as access token to Firebase Storage path. In it i have .svg icon donwloaded from Google Fonts. Now, how can i show them as Google Maps Marker Icon's?

Here is my code:

class _LocationPageState extends State<LocationPage> {
  Completer<GoogleMapController> _controller = Completer();

  late BitmapDescriptor sourceIcon;
  late BitmapDescriptor destinationIcon;
  late LatLng currentLocation;
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  @override
  void initState() {
    super.initState();
    getMarkerData();
  }

  static const _initialCameraPosition = CameraPosition(
    target: LatLng(43.24155902529146, 76.9519522293528),
    zoom: 17,
  );

  void initMarker(specify, specifyId) async {
    var markerIdVal = specifyId;
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(specify['latlng'].latitude, specify['latlng'].longitude),
      infoWindow: InfoWindow(title: specify['title']),
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

  getMarkerData() async {
    FirebaseFirestore.instance.collection('location').get().then((markerData) {
      if (markerData.docs.isNotEmpty) {
        for (int i = 0; i < markerData.docs.length; i++) {
          initMarker(markerData.docs[i].data(), markerData.docs[i].id);
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: MainTheme.lightTheme.primaryColor,
        automaticallyImplyLeading: true,
        title: Text('Локация',
            textAlign: TextAlign.center,
            style: MainTheme.lightTheme.textTheme.headline2),
        elevation: 4,
      ),
      body: GoogleMap(
        markers: Set<Marker>.of(markers.values),
        myLocationButtonEnabled: false,
        zoomControlsEnabled: false,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }
}

**Marker** has an `icon` parameter that you can use to show a custom icon while creating a marker. — Zeeshan Ahmad, Jul 26 '21 at 04:46

score 1 · Accepted Answer · answered Jul 26 '21 at 08:43

1

You can set the icon by specifying the icon property of the Marker class and supplying the BitmapDescriptor with the bytes from the image url.

Check out the code below:

Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imageUrl)).load(imageUrl)).buffer.asUint8List();

final Marker marker = Marker(
  markerId: markerId,
  position: LatLng(specify['latlng'].latitude, specify['latlng'].longitude),
  infoWindow: InfoWindow(title: specify['title']),
  icon: BitmapDescriptor.fromBytes(bytes));

answered Jul 26 '21 at 08:43

Victor Eronmosele

7,040
2
10
33

I tried your code. It worked with actual url like this(https://image.pngaaa.com/210/1203210-middle.png). But when i tried to parse url like this ( Uint8List bytes = (await NetworkAssetBundle(Uri.parse(specify['icon'])).load(specify['icon'])).buffer.asUint8List(); ) and it didn't worked. Any ideas why? – IBlackVikingl Jul 28 '21 at 03:49
I thought its because link leads to .svg. I uploaded .png to Firebase Storage and gave access token to one of the markers. Still nothing – IBlackVikingl Jul 28 '21 at 03:52
Found the problem, its .svg format fault. I downloaded .png version of icons and everything worked perfectly fine. Thanks for the help – IBlackVikingl Jul 28 '21 at 03:54

Flutter: Google Maps how to set icon from Firestore

1 Answers1