Flutter custom Google Map marker info window

Question

I am working on Google Map Markers in Flutter.

On the click of each Marker, I want to show a Custom Info Window which can include a button, image etc. But in Flutte

Answer 1

Bellow is 4 step I had implemented for custom InfoWindow on my project

Step 1: Create a stack for GoogleMap and Info Window Custom.

Stack(
  children: [
    Positioned.fill(child: GoogleMap(...),),
    Positioned(
      top: {offsetY},
      left: {offsetX},
      child: YourCustomInfoWidget(...),
    )
  ]
)

Step 2: When user click Marker calculator position of marker on screen with func:

screenCoordinate = await _mapController.getScreenCoordinate(currentPosition.target)

Step 3: Calculator offsetY, offsetX and setState.

Relate issue: https://github.com/flutter/flutter/issues/41653

devicePixelRatio = Platform.isAndroid ? MediaQuery.of(context).devicePixelRatio : 1.0;

offsetY = (screenCoordinate?.y?.toDouble() ?? 0) / devicePixelRatio - infoWidget.size.width;
offsetX = (screenCoordinate?.x?.toDouble() ?? 0) / devicePixelRatio - infoWidget.size.height;

Step 4: Disable Marker auto move camera when tap

Marker(
   ...
   consumeTapEvents: true,)