Compose로 GoogleMap 다루기

작성자가 안드로이드 개발자로 커리어를 전향한 이유는 앱을 만드는 게 재밌기 때문이였다.

웹과 서버보단 내가 들고다니는 폰에서 사용할 만한 앱을 만드는 게 더 재밌지 않나?

주말마다 차를 타고 놀러다니는데 가끔 주차장의 넓이가 엄청 큰 장소를 갈 때 내 차를 찾기가 너무 힘들었다.

그래서 간단히 내 위치를 기록하고 지도로 위치를 볼 수 있는 앱을 만들어 보았고

그 중에 Compose로 GoogleMap을 다뤘던 경험을 적어보자한다.

동작 방식

정말 별 거 없다

현재 주소 기록하기를 누르면 내 위도와 경도가 기록되고

구글맵을 통해서 현재 내 위치와 내가 기록한 위치를 지도에 표시한다.

위의 이미지 파일은 내가 기록한 위치와 현재 내 위치가 같은 곳이기에 저렇게 나온다.

GoogleMap

구글맵을 내 안드로이드 프로젝트에 추가하는 방법은 블로그에 많이 나와있으므로 생략한다.

implementation("com.google.android.gms:play-services-maps:18.1.0")
implementation("com.google.android.gms:play-services-location:21.0.1")
implementation("com.google.maps.android:maps-compose:2.9.0")

의존성을 추가해야하는데 세번째 코드처럼 compose를 타깃으로 한 의존성을 추가해야한다.

@Composable
fun GoogleMapScreen() {
    val context = LocalContext.current
    val latLng = getMyLocation(context)
    val dataStore = DataStoreModule(context)
    var savedLatitude by remember {
        mutableDoubleStateOf(0.0)
    }
    var savedLongitude by remember {
        mutableDoubleStateOf(0.0)
    }
    LaunchedEffect(Unit) {
        dataStore.getLatitude.collect {
            savedLatitude = it
        }
    }

    LaunchedEffect(Unit) {
        dataStore.getLongitude.collect {
            savedLongitude = it
        }
    }

    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(latLng, 17f)
    }
    val uiSettings = remember {
        MapUiSettings(myLocationButtonEnabled = true)
    }
    val properties by remember {
        mutableStateOf(MapProperties(isMyLocationEnabled = true))
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    ) {
        if (savedLatitude != 0.0 && savedLongitude != 0.0) {
            Marker(
                state = MarkerState(position = LatLng(savedLatitude, savedLongitude)),
            )
        }
    }
}

DataStore에서 값을 가져오는 코드가 있지만 cameraPositionState 변수부터 보면 된다.

rememberCameraPositionState를 통해 카메라의 위치값을 기억하고, 지도를 몇 배율로(17f) 볼지 정할 수 있다.

uiSetting과 properties 변수엔 내 위치로 이동할 수 있는 버튼을 활성화 시킬 수 있다.(첨부한 이미지 우측 상단) 다만, 버튼의 위치를 옮길 수는 없는 것 같다.

구글맵 컴포즈의 화면을 더 다루고 싶으면 MapUiSetting.kt를 확인해 기능을 enable 해보면 된다.

Marker를 지도에 띄우는 법은 간단하다 Marker 함수를 생성하고 원하는 인자값을 통해 Marker의 속성을 정할 수 있다.

본인은 위치값을 통해 마커가 지도 어디에 생성될지만 설정했지만

title을 통해 마커의 이름을 설정할 수도 있고

onClick 리스너를 설정할 수도 있다.

이것 또한 Marker.kt를 자세히 보면 확인할 수 있다.

개인적으로 xml 환경에서 구글맵, 네이버 지도, 카카오맵을 다뤄봤지만

Compose로 사용하는 GoogleMap이 제일 간단하고 편했다.