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

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

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