[TIL-230514] Jetpack Compose로 Google Maps API 적용하기

안녕하세요

첫 (이렇게 작성하는게 맞는지 모르겠지만?) TIL를 Google Maps API 적용으로 시작해보았는데요.

[TIL-230512] Google Map Api 적용하기

Activity, Fragment에 띄우는 것으로 배워보았지만, Jetpack Compose에 적용하는것이 좋을 것 같아 알아보았습니다.

 

---

1. 라이브러리 설치

1. Compose로 적용을 위한 라이브러리 설치를 위해 app module의 build.gradle 파일에 종속성을 추가합니다.

// compose 용 map 라이브러리
implementation 'com.google.maps.android:maps-compose:2.11.4'
// 기존에 추가해줬던 라이브러리
implementation 'com.google.android.gms:play-services-maps:18.1.0'

2. 코드 작성

1. Compose 용 코드를 작성합니다.

val seoul = LatLng(37.566535, 126.97796919)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(seoul, 10f)
}
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
) {
    Marker(
        state = MarkerState(position = seoul),
        title = "Seoul",
        snippet = "Marker in Seoul"
    )
}

 

코드 설명

rememberCameraPositionState : 지도의 초기 상태 (처음 지역 등)을 설정합니다. Scope안의 CameraPosition.fromLatLngZoom에서 위치와 축소/확대를 지정합니다.

GoogleMap() : MapView를 위한 Compose Layout

 

Marker() : 지도에 마커를 찍기위한 Composable

* 이외에 진행해야하는 API Key 획득 및 선언은 이전 포스팅 방법과 동일합니다.

 

결과

---

오늘은 이전에 적용하였던 Google Map 출력을 Jetpack Compose를 이용해서 구현해보았습니다.

잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요!