I'm displaying a custom composable with marker info and some buttons centered on the screen when the user clicks a marker on Google Maps. I'm not using MarkerInfoWindow because it doesn't let you to have interactive buttons inside.

The issue is that when the user selects a marker the camera animates to center the marker on the screen, and as the custom composable is displayed on the center of the screen, then the marker is below the composable and user can't see it.

I need to add an offset to the camera animation that is being produced when the user selects a marker, that offset must be a Y offset that leaves the marker just below the centered composable with marker info. It's the same behaviour you see when you use MarkerInfoWindow.

How can that be done?

My map:

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
) {
    val bitmapDescriptor: BitmapDescriptor by remember { mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.place)) }

    for (busStop in uiState.data) {
        val markerState = rememberMarkerState(
            position = LatLng(busStop.lat, busStop.lon)
        )

        Marker(
            state = markerState,
            icon = bitmapDescriptor,
            onClick = {
                vm.selectBusStop(busStop)
                false
            }
        )
    }
}

My custom composable with marker info:

uiState.selectedBusStop?.let { busStop ->
    BusStopPanel(
        modifier = Modifier.align(Alignment.Center)
        busStop = busStop,
        favorite = vm.isFavorite(busStop.id),
        closeBusStopPanel = { vm.deselectBusStop() },
        switchFavorite = { vm.switchFavorite(it) },
    )
}