How to add extra into text into flutter google map custom marker?

Question

The problem is how to infuse text overlap on the custom google map marker with text which represents the vehicle registration number.

I have tried to use this method to h

Answer 1

I kludged/solved this by creating a function which returned a , whose returned and resolved value I then passed in as the icon when initializing a Marker:

Sorry to say that I don't remember why I padded the method with the magic 40 and 20 constants. Probably calculated by visual test with what I was rendering at the time.

Future createCustomMarkerBitmap(/* your args here */) async {

PictureRecorder recorder = new PictureRecorder();
Canvas c = new Canvas(recorder);

/* Do your painting of the custom icon here, including drawing text, shapes, etc. */

Picture p = recorder.endRecording();
ByteData pngBytes = await (await p.toImage(
    tp.width.toInt() + 40, tp.height.toInt() + 20))
    .toByteData(format: ImageByteFormat.png);

Uint8List data = Uint8List.view(pngBytes.buffer);

return BitmapDescriptor.fromBytes(data);
}

Then when creating the marker, you can pass in the BitmapDescriptor as the icon, like so:

createCustomMarkerBitmap(...).then((BitmapDescriptor bitmapDescriptor) {

_markers.add(new Marker( /* in addition to your other properties: */ icon: bitmapDescriptor, )); });

or:

BitmapDescriptor bitmapDescriptor = await createCustomMarkerBitmap(...);

Marker marker = Marker( /* in addition to your other properties: */ icon: bitmapDescriptor );

Let me know if that helps. Gl!

I have found this answer for github issue