[Android] Compose로 Naver Map 띄우기

Naver Map 제공 Demo Project

https://github.com/fornewid/naver-map-compose

GitHub - fornewid/naver-map-compose: NAVER Map Android SDK for Jetpack Compose 🗺

 

공식 API 문서

https://androidexample365.com/naver-map-android-sdk-for-jetpack-compose/

NAVER Map Android SDK for Jetpack Compose

 

위의 문서들을 참고하시면 더욱 좋습니다.

 

 

Compose로 Naver Map을 띄어보겠습니다.

(Naver Cloud Console에서 프로젝트와 API Key 값을 얻어오는 과정은 다른 블로그에 많이 나와 있으니 생략하겠습니다.)

 

 

1. 먼저 settings.gradle에 maven을 추가합니다.

 

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
        maven { url 'https://naver.jfrog.io/artifactory/maven/' }
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://naver.jfrog.io/artifactory/maven/' }
    }
}

 

2. gradle.properties에 Jetifier 옵션을 추가합니다.

 

android.useAndroidX=true
android.enableJetifier=true

 

3. build.gradle의 dependencies에 라이브러리를 추가합니다.

 

// naver map to compose
implementation("io.github.fornewid:naver-map-compose:1.2.3")
// naver map SDK
implementation("com.naver.maps:map-sdk:3.16.1")
// fused location
implementation("com.google.android.gms:play-services-location:21.0.1")

 

4. Application 클래스 생성 후 Client ID를 등록합니다.

 

@HiltAndroidApp
class EdgeMapRefactoringApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        NaverMapSdk.getInstance(this).client =
            NaverMapSdk.NaverCloudPlatformClient(BuildConfig.Client_ID)
    }
}

 

* 저는 Multi Module로 프로젝트를 구성했기 때문에 Hilt를 사용해서 다른 모듈에서도 적용될 수 있도록 구현했습니다.

* 위와 같은 이유로 AndroidManifests.xml에 Client ID를 추가하지 않고, Kotlin 코드로 API를 호출했습니다.

 

<meta-data
    android:name="android.app.lib_name"
    android:value="@string/client_id" />

* AndroidManifests.xml에서 추가하실 분들은 application 내에 meta-data를 위와 같이 추가하시면 됩니다.

 

 

5. Naver Map을 호출할 화면에 NaverMap Composable을 호출합니다.

 

@ExperimentalNaverMapApi
@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
    ) {
        NaverMap(
            modifier = Modifier.fillMaxSize()
        ) {

        }
    }
}

 

* 아직 정식 출시가 되지 않았기 때문에 @ExperimentalNaverMapApi Annotation을 추가해야 합니다.

 

 

 

실행하면 위와 같이 정상적으로 출력됩니다.

 

 

P.S.

 

@ExperimentalNaverMapApi
@Composable
public fun NaverMap(
    modifier: Modifier = Modifier,
    cameraPositionState: CameraPositionState = rememberCameraPositionState(),
    properties: MapProperties = DefaultMapProperties,
    uiSettings: MapUiSettings = DefaultMapUiSettings,
    locationSource: LocationSource? = null,
    locale: Locale? = null,
    onMapClick: (PointF, LatLng) -> Unit = { _, _ -> },
    onMapLongClick: (PointF, LatLng) -> Unit = { _, _ -> },
    onMapDoubleTab: (point: PointF, coord: LatLng) -> Boolean = { _, _ -> false },
    onMapTwoFingerTap: (point: PointF, coord: LatLng) -> Boolean = { _, _ -> false },
    onMapLoaded: () -> Unit = {},
    onLocationChange: (Location) -> Unit = {},
    onOptionChange: () -> Unit = {},
    onSymbolClick: (Symbol) -> Boolean = { false },
    onIndoorSelectionChange: (IndoorSelection?) -> Unit = {},
    contentPadding: PaddingValues = NoPadding,
    content: (@Composable @NaverMapComposable () -> Unit)? = null,
)

 

Naver Map은 modifier, cameraPositionState, onMapClick 등 기존 명령형 버전과 같이 거의 동일한 기능을 제공합니다. 한 번 사용해 보시는 것도 좋은 공부가 될 것 같습니다.

 

 

감사합니다.