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/[email protected]";
          
          
         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

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,
              ),
            ),
          );
        }));
  }
}