Google Maps Compose - How to set Marker to center ...

# compose

[Sanjay]

Google Maps Compose - How to set Marker to center of screen but map can be draggable?

I want to set the marker to center of the map view, so when user drag the map view it change the map position, but marker should be in center of the screen, so we can get the new latitude and longitude of the marker position, similar to Uber/Ola/Zomato? I have tried to set marker as draggable but it makes marker only draggable but I want screen only draggable, How can I achieve this? Thanks in Advance!

I have Attach the Code in Thread.

[Zach Klippenstein (he/him) [MOD]]

Please keep long code snippets to the thread, it keeps the main channel more readable.

[Sanjay]

@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class)
@Composable
fun MapScreen(navController: NavHostController) {
    val (addressQuery, setAddressQuery) = remember { mutableStateOf("") }
    var initialLocation = remember { mutableStateOf(LatLng(0.132828, 100.804833)) }
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(initialLocation.value, 5f)
    }
    val locationPermission = rememberMultiplePermissionsState(
        listOf(Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION)
    )
    var uiSettings = MapUiSettings(
        compassEnabled = true,
        rotationGesturesEnabled = true,
        scrollGesturesEnabled = true,
        tiltGesturesEnabled = false,
        zoomControlsEnabled = false,
        zoomGesturesEnabled = true,
        mapToolbarEnabled = false,
        myLocationButtonEnabled = false,
        scrollGesturesEnabledDuringRotateOrZoom = true,
        indoorLevelPickerEnabled = true
    )
    var mapProperties = MapProperties(
        maxZoomPreference = 15f,
        minZoomPreference = 1f,
        isTrafficEnabled = false,
        mapType = MapType.NORMAL,
/*        latLngBoundsForCameraTarget = LatLngBounds(
            LatLng(53.2017, -3.0257),
            LatLng(53.2840, -2.5325)
        ),*/
        isMyLocationEnabled = locationPermission.allPermissionsGranted,
    )
    var mapColorScheme = remember { mutableStateOf(ComposeMapColorScheme.FOLLOW_SYSTEM) }
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
    var marker = remember {  MarkerState(position = initialLocation.value) }
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    if (locationPermission.allPermissionsGranted) {
                        cameraPositionState.position = CameraPosition.fromLatLngZoom(initialLocation.value, 15f)
                    } else {
                        locationPermission.launchMultiplePermissionRequest()
                    }
                },
                contentColor = if (locationPermission.allPermissionsGranted) LogoBlue else Gray
            ) {
                Icon(
                    painter = painterResource(R.drawable.ic_gps),
                    contentDescription = "Calibrate to current location",
                    tint = LogoBlue
                )
            }
        },
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Image(
                        painter = painterResource(id = R.drawable.ic_pocket_small),
                        contentDescription = null
                    )
                }, colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.onPrimary,
                ),
                navigationIcon = {
                    IconButton(onClick = {
                        navController.navigateUp()
                    }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "back arrow",
                            tint = MaterialTheme.colorScheme.onPrimary
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { paddingValues ->
        if (locationPermission.allPermissionsGranted) {
            LocationFetcher { location, string ->
                location?.let {
                    initialLocation.value = LatLng(it.latitude, it.longitude)
                    cameraPositionState.position = CameraPosition.fromLatLngZoom(LatLng(it.latitude, it.longitude), 15f)
                }
            }
        }
        Box(Modifier.padding(top = paddingValues.calculateTopPadding())) {
            GoogleMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState,
                mapColorScheme = mapColorScheme.value,
                uiSettings = uiSettings,
                properties = mapProperties,
            ) {

            }
            Column(
                Modifier
                    .fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                CustomSearchView(
                    addressQuery,
                    onValueChange = {
                        println(it)
                        setAddressQuery(it)
                    }) {
                    addressList()
                }
            }
        }
    }
}