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}`,
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(() {});
},
);
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.
You can use showMarkerInfoWindow property the GoogleMapController
final GoogleMapController controller = await _controller.future;
controller.showMarkerInfoWindow(MarkerId('ID_MARKET'));
