How can a custom_info_window be displayed when creating a map in Flutter?

edit

To display a Custom Info Window on a Google Map in Flutter, you need to follow these steps:

1. Add the Google Maps plugin to your Flutter project by adding the dependency to your pubspec.yaml file.

dependencies:
  google_maps_flutter: ^1.1.1

1. Import Google Maps plugin in your Dart code.

import 'package:google_maps_flutter/google_maps_flutter.dart';

1. Create a GoogleMap widget with the initialCameraPosition and the markers. You can also set the onTap callback on Marker to show the Custom Info Window.

GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(37.4220, -122.0841), zoom: 15),
  markers: Set<Marker>.of(markers.values),
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
  onTap: (LatLng latLng) {
    _showMarkerInfoWindow(null);
  },
),

1. Create a method to create the Custom Info Window widget and to show/hide it based on the selected marker.

void _showMarkerInfoWindow(MarkerId markerId) {
  if (markerId != null && markers.containsKey(markerId)) {
    final Marker marker = markers[markerId];

    setState(() {
      selectedMarker = marker;
      showInfoWindow = true;
    });
  } else {
    setState(() {
      selectedMarker = null;
      showInfoWindow = false;
    });
  }
}

Widget _buildCustomInfoWindow(BuildContext context) {
  if (!showInfoWindow || selectedMarker == null) {
    return SizedBox.shrink();
  }

  return Align(
    alignment: Alignment.topCenter,
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.white,
      ),
      width: 300,
      height: 100,
      child: Center(
        child: Text(selectedMarker.title),
      ),
    ),
  );
}

1. Finally, add the Custom Info Window widget to the GoogleMap widget using the Overlay support.

Stack(
  children: <Widget>[
    GoogleMap(
      ...
    ),
    _buildCustomInfoWindow(context),
  ],
);

These are the basic steps to create and display a Custom Info Window on a Google Map in Flutter.