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 have the text overlay on the icon builder: (context) =>() But is not recognized at all.

  class MapsDemo extends StatefulWidget {
    @override
    State createState() => MapsDemoState();
  }

class MapsDemoState extends State<MapsDemo> {

  GoogleMapController mapController;
 //Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.contacts]);import 'package:permission_handler/permission_handler.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
            children: <Widget>[
            Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: GoogleMap(
                 onMapCreated: (GoogleMapController controller) {
                   mapController = controller;
                 },
                ),
            ),
           ],
         ),
         floatingActionButton: FloatingActionButton(onPressed: () {
        
          double mq1 = MediaQuery.of(context).devicePixelRatio;
          String icon = "images/car.png";
          if (mq1>1.5 && mq1<2.5) {icon = "images/car2.png";}
          else if(mq1 >= 2.5){icon = "images/car3.png";}
          print("Mq 1"+mq1.toStringAsFixed(5));
          String iconPath="lib/assets/move@3x.png";
          
          
         mapController.addMarker(
              MarkerOptions(
                position: LatLng(37.4219999, -122.0862462),
                infoWindowText: InfoWindowText("TEST","TEST"),
                icon: BitmapDescriptor.fromAsset(iconPath),
                consumeTapEvents: true,
                
                /*builder: (context) =>(

                )*/

                //icon:BitmapDescriptor.fromAsset(assetName)
              ),
         );
         
         mapController.addMarker(
              MarkerOptions(
                position: LatLng(38.4219999, -122.0862462),
                infoWindowText: InfoWindowText("tt","adfaf"),
                icon: BitmapDescriptor.fromAsset("lib/assets/logo.png"),
                anchor: Offset(100,160),
              
                //icon:BitmapDescriptor.fromAsset(assetName)
              ),
         );
       
         mapController.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(37.4219999, -122.0862462),
               
                zoom: 15.0,
              ),
            ),
          );
       
        })
      );
    
  }
  
}

What I have shown is the icon appear correctly if you notice the white space on the right of the icon is where I want the registration number to appear.

Answer 1

I found myself on this exact stackoverflow page multiple times this year. So, I decided to go and make my first Flutter Package and created this. If your objective is to add a simple and clear text to map marker, this would do it.

https://pub.dev/packages/label_marker

Usage

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

Answer 2

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<BitmapDescriptor> 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

Answer 3

try this :

 import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapsDemo extends StatefulWidget {
  @override
  State createState() => MapsDemoState();
}

class MapsDemoState extends State<MapsDemo> {
  final Set<Marker> _markers = {};

  void _onAddMarkerButtonPressed() {
    print('in _onAddMarkerButtonPressed()');
    setState(() {
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId("111"),
        position: LatLng(30.666, 76.8127),
        infoWindow: InfoWindow(
          title: "bingo! This works",
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    });
    print('setState() done');
  }

  GoogleMapController mapController;
  //Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.contacts]);import 'package:permission_handler/permission_handler.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: GoogleMap(
                markers: _markers,
                onMapCreated: (GoogleMapController controller) {
                  mapController = controller;
                },
                initialCameraPosition:
                    CameraPosition(target: LatLng(30.666, 76.8127), zoom: 15),
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          print('in fab()');
          double mq1 = MediaQuery.of(context).devicePixelRatio;



          _onAddMarkerButtonPressed();

          mapController.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(30.666, 76.8127),
                zoom: 15.0,
              ),
            ),
          );
        }));
  }
}