Add markers at the tapped locations in Flutter Maps?

late MapLatLng _markerPosition;
late MapZoomPanBehavior _mapZoomPanBehavior;
late MapTileLayerController _controller;
 
@override
void initState() {
  _controller = MapTileLayerController();
  _mapZoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4);
  super.initState();
}
 
void updateMarkerChange(Offset position) {
     // We have converted the local point into latlng and inserted marker 
     // in that position.
  _markerPosition = _controller.pixelToLatLng(position);
  if (_controller.markersCount > 0) {
    _controller.clearMarkers();
  }
  _controller.insertMarker(0);
}
 
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Marker sample')),
    // To obtain the maps local point, we have added a gesture 
    // detector to the map’s widget.
    body: GestureDetector(
      onTapUp: (TapUpDetails details) {
        updateMarkerChange(details.localPosition);
      },
      child: SfMaps(
        layers: [
          MapTileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            zoomPanBehavior: _mapZoomPanBehavior,
            initialFocalLatLng: MapLatLng(28.0, 77.0),
            controller: _controller,
            markerBuilder: (BuildContext context, int index) {
              return MapMarker(
                latitude: _markerPosition.latitude,
                longitude: _markerPosition.longitude,
                child: Icon(Icons.location_on, color: Colors.red),
              );
            },
          ),
        ],
      ),
    ),
  );
}