How to set a text as Marker in Google Maps


Hey I am trying to display a text in the map. Therefore I use textpainter to ‘draw’ the given String and add it as marker. Now there is my problem: I know that the icon for the marker should be a BitmapDescriptor, but I dont know how to convert the returned ‘picture’ of the textpainter into a BitmapDescriptor.

  class MapAction extends StatefulWidget {

  MapAction({Key key, this.inputText}) : super(key: key);
  final String inputText;

  _MapActionState createState() => _MapActionState();

class _MapActionState extends State<MapAction> {
  Set<Circle> _circles = Set();
  Set<Marker> _marker = Set();

  int counter1 = 0;
  int counter2 = 0;
  void setMarker(LatLng position) async {

    Marker tmp = Marker(
      //icon: How can I set my "inputText" as Marker
      markerId: MarkerId("$counter2"), 
      position: position);
    setState(() {

  Widget build(BuildContext context) {
    return StreamBuilder<Position>(
        stream: GeolocatorService().getCurrentLocation(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                child: CircularProgressIndicator());
          } else {
            return Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                child: GoogleMap(
                  markers: _marker,
                  initialCameraPosition: CameraPosition(
                      target: LatLng(
                      zoom: 16.0),
                  zoomControlsEnabled: false,
                  //mapType: MapType.satellite,
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,

class MyPainter extends CustomPainter {

  final String inputText;

  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      fontSize: 30,
    final textSpan = TextSpan(
      text: inputText,
      style: textStyle,
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
      minWidth: 0,
      maxWidth: size.width,
    final xCenter = (size.width - textPainter.width) / 2;
    final yCenter = (size.height - textPainter.height) / 2;
    final offset = Offset(xCenter, yCenter);
    textPainter.paint(canvas, offset);

  bool shouldRepaint(CustomPainter old) {
    return false;

I do know that I can display the drawn text with:

 CustomPaint(size: Size(300, 300),
   painter: MyPainter(inputText: inputText),

So is there a method or something like that to convert this CustomPaint-Widget to a BitmapDescriptor?


try to use PictureRecorder to output Image:

ui.PictureRecorder recorder = ui.PictureRecorder();
MyPainter painter = MyPainter(inputText: 'blablabla');
return recorder.endRecording()
    .toImage(painter.size.width.floor(), painter.size.height.floor());

and then change to byte for google map image display:

var pngBytes = await image.toByteData(format: ui.ImageByteFormat.png)

Answered By – Jim

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *