Jetpack Compose Map Marker getting destroyed on bottom nav item re-click

Question

I'm currently working on an Android app using Jetpack Compose and incorporating maps with markers. Everything seems to be functioning well initially - the map loads up properly and the markers are displayed as expected. However, I've encountered an issue that arises when I re-click on a bottom navigation item.

Upon re-clicking the bottom navigation item, it appears that the map and its associated markers are being destroyed and reloaded. This results in a loss of markers on the map. I've attempted to address this issue by utilizing rememberMarkerPosition and rememberCameraPosition to preserve the state of the markers and camera position, but unfortunately, this approach hasn't resolved the problem.

I suspect that there might be some underlying lifecycle or state management intricacies within Jetpack Compose or the map library that I'm not fully grasping.

Has anyone else encountered a similar issue when working with Jetpack Compose and maps, where markers are being removed upon re-clicking a bottom navigation item? If so, what strategies or techniques have you employed to ensure that markers are retained even after such UI interactions? I would greatly appreciate any insights, code examples, or guidance to help me overcome this challenge.

Here's a simplified version of the code I'm using for reference:

@Composable
fun LocationMap(latLng: LatLng) {
    val mapProperties by remember {
        mutableStateOf(
            MapProperties(maxZoomPreference = 30f, minZoomPreference = 5f)
        )
    }
    val mapUiSettings by remember {
        mutableStateOf(
            MapUiSettings(mapToolbarEnabled = false)
        )
    }
    GoogleMap(properties = mapProperties, uiSettings = mapUiSettings, cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(
            com.google.android.gms.maps.model.LatLng(
                latLng.latitude,
                latLng.longitude
            ), 15f
        )
    }) {
        Marker(
            state = MarkerState(
                position = com.google.android.gms.maps.model.LatLng(
                    latLng.latitude,
                    latLng.longitude
                )
            ),
            title = "Title"
        )
    }
}

Also, I am using the latest compose map library.

My Navigation item click function exists saveState like below:

onClick = {navController.navigate(item.screen_route) {
                            navController.graph.startDestinationRoute?.let { screen_route ->
                                popUpTo(screen_route) {
                                    saveState = true
                                }
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    }

Thank you for any assistance you can provide in helping me resolve this marker retention issue after re-clicking the bottom navigation item in Jetpack Compose.

Jetpack Compose Map Marker getting destroyed on bottom nav item re-click

Answers (1)

Related Questions