I’m trying to implement GoogleMap composable in Jetpack Compose. I’ve a map working with a button to reset camera to user location and some ElevatedCards in a LazyRow.

What I want to achieve is have these two (button + elevated cards) displayed as content in GoogleMap so that the zoom buttons of GoogleMap get automatically reset to the correct position on the screen.

The code is of the following:

@Composable
fun GoogleMapView(
    modifier: Modifier = Modifier,
    context: Context,
    location: LatLng,
    bounds: LatLngBounds,
    listOne: List<Object?>,
    listTwo: List<Object?>,
    onMapLoaded: () -> Unit = {},
    content: @Composable () -> Unit = {}
) {
[...]

Box(
        modifier = Modifier.fillMaxSize()
    ) {
        Box(Modifier.fillMaxSize()) {
            LaunchedEffect(key1 = true) {
                cameraPositionState.move(
                    update = CameraUpdateFactory.newLatLngBounds(bounds, 100)
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
            }
            GoogleMap(
                modifier = modifier,
                cameraPositionState = cameraPositionState,
                properties = mapProperties,
                uiSettings = uiSettings,
                onMapLoaded = onMapLoaded
            ) {
                /** Add custom marker that displays user location on the Map */
                MarkerComposable(
                    state = locationState
                ) {
                    LocationMarker()
                }

                val markerClick: (Marker) -> Boolean = {
                    Log.d(TAG, "${it.title} was clicked")
                    cameraPositionState.projection?.let { projection ->
                        Log.d(TAG, "The current projection is: $projection")
                    }
                    false
                }

                markers.forEach { marker ->
                    AdvancedMarker(
                        state = marker,
                        onClick = markerClick,
                        collisionBehavior = 1
                    )
                }

                content()
            }
        }
    }

    /** Add go home button */
    Column(
        modifier = Modifier
            .padding(bottom = 100.dp, end = 5.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.End
    ) {
        Button(
            onClick = {
                cameraPositionState.move(
                    update = CameraUpdateFactory.newLatLngBounds(bounds, 100)
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
            }
        ) {
            Box(
                modifier = Modifier
                    .rotate(65f)
            ) {
                Icon(
                    Icons.Rounded.PlayArrow,
                    contentDescription = null
                )
            }
        }
    }

    /** Elevated cards */
    ElevatedCards(
        objects = objects,
        onObjectClick = { }
    )

where ElevatedCards composable is just:

@Composable
fun ElevatedCards(
    modifier: Modifier = Modifier,
    objects: List<Object?>,
    onObjectClick: () -> Unit
) {
    LazyRow(
        modifier = modifier.fillMaxWidth(),
        contentPadding = PaddingValues(20.dp)
    ) {
        items(objects) { object ->
            if (object != null) {
                MapsElevatedCard(
                    object = object,
                    onObjectClick = onObjectClick
                )
            }
        }
    }
}

and MapsElevatedCard renders an ElevatedCard composable.

Question

How can I bring button + elevated cards as content into GoogleMaps? Right now I’m overlaying on top of the GoogleMap and using padding to move around the Box es containing the composables, but as you can imagine this is not scalable nor device safe as different devices can have different screen sizes.

What I want is to incorporate button + elevated cards as part of GoogleMap controls and have GoogleMap adjust the arrangement as needed.

I’ve attached a screenshot of how it looks right now

I’d like the elevated cards to be at the bottom of the screen with some guaranteed padding.