How to display text text on google map marker in flutter

Question

I want to add a text over my current marker, however when Im trying to add a label to marker it throws error that it's not defined. In javascript api I have done it this way:

       const marker = new google.maps.Marker({
            position: { lat: item.position.lat, lng: item.position.lon },
            label: `${item.sort}`,

Answer 1

This package will give you exactly what you are describing in the question. Use the CustomMarker widget; you can pass the label parameter, just as you mentioned in how you expect the result. .

https://pub.dev/packages/label_marker .

Example

markers.addLabelMarker(LabelMarker(
    label: "TextToShow",
    markerId: MarkerId("idString"),
    position: LatLng(10.0, 11.0),
    backgroundColor: Colors.green,
    )).then((value) {
    setState(() {});
    },
);

Answer 2

You can use showMarkerInfoWindow property the GoogleMapController

final GoogleMapController controller = await _controller.future;
controller.showMarkerInfoWindow(MarkerId('ID_MARKET'));

Answer 3

As far as I know, you can only use marker icons to do that by using painters to render your text as image and display this image as the icon of the marker.

See https://stackoverflow.com/a/63201170/1151983 or https://stackoverflow.com/a/58173697/1151983 for examples.

Update: The following example shows how to use multiple painters on the same canvas. The first painter creates a price tag marker. The second one writes the brand name onto the canvas. In your example, this could be the label.

Future<BitmapDescriptor> _getSinglePriceTag({
    required String price,
    required String brandName,
  }) async {
   
    String resolutionPathModifier;
    resolutionPathModifier = _getResolutionPathModifier(pixelRatio);

    final singleTagImage =
        await load('assets/tags/${resolutionPathModifier}pricetag_head.png');
    final superScriptPrice = getSuperScriptPrice(price);
    final width = singleTagImage.width.toDouble();
    final height = singleTagImage.height.toDouble();
    final widthAsInt = width.floor();
    final heightAsInt = height.floor();

    final pictureRecorder = ui.PictureRecorder();

    final canvas = Canvas(pictureRecorder);
    final priceTagPainter = PriceTagPainter(
      singleTagImage,
      price: superScriptPrice,
      pixelRatio: pixelRatio,
    );
    final brandPainter = BrandPainter(
      singleTagImage,
      pixelRatio: pixelRatio,
      brandName: brandName,
    );
    priceTagPainter.paint(canvas, Size(width, height));
    brandPainter.paint(canvas, Size(width, height));

    final recordedPicture = pictureRecorder.endRecording();
    final img = await recordedPicture.toImage(widthAsInt, heightAsInt);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);

    return BitmapDescriptor.fromBytes(data!.buffer.asUint8List());
  }

The painter could look like this.

class PriceTagPainter extends CustomPainter {
  PriceTagPainter(
    this.priceTagImage, {
    required this.price,
    required this.pixelRatio,
  });

  static const textStyle = TextStyle(
    color: Colors.black,
    fontFamily: 'OpenSans',
  );

  final String price;
  final double pixelRatio;
  final ui.Image priceTagImage;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(priceTagImage, Offset.zero, Paint());

    final textSpan = TextSpan(
      text: price,
      style: textStyle,
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
      textScaleFactor: pixelRatio,
    )..layout(
        maxWidth: size.width,
      );

    final dx = (size.width - textPainter.width + 5) * 0.5;
    final dy = (size.height - textPainter.height) * 0.6;
    final offset = Offset(dx, dy);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

It creates something like this.