bpillon / google_maps_cluster_manager

Simple Flutter clustering library for Google Maps
https://pub.dev/packages/google_maps_cluster_manager
MIT License
124 stars 111 forks source link

[sample code] Using Custom markers #6

Closed fvisticot closed 3 years ago

fvisticot commented 4 years ago

I need to display custom marker when cluster is not multiple. In that case I would like to display my own widget based on Image and Text. I have tried to use the MarkerGenerator widget as follow: But the marker for simple cluster is not displayed. Any idea ?

 Future<Marker> Function(Cluster) get _markerBuilder => (cluster) async {
        var beacon;
        if (!cluster.isMultiple) {
          beacon = cluster.items.first as Beacon;
          final productImage = await ProductsRepository.instance
            .imageFromProductName(beacon.product.name);
          final beaconMarker = Container(
            width: 120,
            height: 120,
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    'assets/images/marker.png', 
                  ),
                ),
                Align(
                    alignment: Alignment.center,
                    child: Container(
                      padding: EdgeInsets.only(bottom: 10),
                      width: 80,
                      height: 80,
                      child: productImage
                    ))
              ],
            ),
          );

          final markerCompleter = Completer<Marker>();
          MarkerGenerator([beaconMarker], (bitmaps) {
            final marker = Marker(
              markerId: MarkerId(cluster.getId()),
              position: cluster.location,
              infoWindow: InfoWindow(
                title: beacon.name,
              ),
              icon: BitmapDescriptor.fromBytes(bitmaps.first),
            );
            markerCompleter.complete(marker);
          }).generate(context);
          return markerCompleter.future;
        } else {
          return Marker(
            markerId: MarkerId(cluster.getId()),
            position: cluster.location,
            icon: await _getMarkerBitmap(125, text: cluster.count.toString()),
          );
        }
      };
JayPerfetto commented 4 years ago

Marker generator wont work - I tried it myself, you have to use custom painting - start with his example project and just extend from there - he uses the custom painter to do a white circle then an orange inner, and then another white center - he also uses the text painter to render the count. This should give you all the tools you need to either draw a custom shape with text in it, or get your bitmapDescriptor from a png in your assets folder