[Android/Kotlin] Naver Map API 사용법

먼저 아래 사이트에 들어가서 네이버클라우드에 로그인을 한뒤, 신용카드 등록을 완료하면 이용신청을 할수있게된다

(신용카드 등록해도 유료상품을 이용하지 않으면 결제가되지 않음)

https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

 

 

 

이용신청 버튼 눌러주기

 

 

 

 

Application 등록버튼 누르기

 

 

 

이용약관에 동의해주면 아래와같은 화면이 뜰텐데

Application이름을 입력해주고

Mobile Dynamic Map에 체크해주고

Android 앱 패키지 이름에 내프로젝트의 패키지 이름을 그대로 복붙해서 넣으면 된다

 

 

 

 

등록을 눌러주면 아래와 같이 뜰텐데 인증정보를 눌러준다

 

 

그럼 이런식으로 인증정보가 나오는데 

이중에서 Client ID가 추후에 필요하므로 잘 복사해서 가지고 있자!

 

 

 

 

 

 

이제 안드로이드 스튜디오로 넘어가서 지도를 띄우는 작업을 해보겠다

https://navermaps.github.io/android-map-sdk/guide-ko/1.html

해당 공식문서를 참고해서 진행했다

 

 

네이버 지도 SDK는 Maven 저장소에서 배포되기때문에 루트 프로젝트의 build.gradle에 저장소 설정을 추가해준다.

나같은 경우에는 build.gradle에 추가하면 오류가 발생해서 settings.gradle에 추가해줘야했다.

버전차이 때문인것같다

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven("https://repository.map.naver.com/archive/maven")
    }
}

settings.gradle

 

 

그리고 build.gradle에 네이버 지도 SDK에 대한 의존성을 선언해준다

dependencies {
    // 네이버 지도 SDK
    implementation("com.naver.maps:map-sdk:3.19.1")
}

build.gradle

 

 

이제 아까 발급받은 client ID를 사용해줄것이다

AndroidManifest.xml 로 가서 아래와같이 지정해주면된다.

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

 

 

 

 

근데 나는 client ID를 github에 노출시키지 않기위해서 client ID를 로컬프로퍼티로 빼주는 작업을 했는데, 이부분에서 조금 헤맸었다

일단 local.properties에 가서 client ID를 작성해준다.  local.properties에 작성한 키,ID값들은 깃허브에 올라가지 않는다.

근데 주의해야할점은 AndroidManifest에서 사용할 값은 ""(큰따옴표)를 표시하지 않는다

ex)
NAVERMAP_CLIENT_ID = 12345678	// Menifest에서 사용할경우
KEY = "12345678"

local.properties

 

 

그리고 build.gradle로 가서 아래와같이 작성해준다

여기서도 주의해야할 것이 있는데 AndroidManifest.xml에서 사용하지 않는 ID나 Key값이면 아래와같이 buildConfig를 사용해서 작성해줘야한다.

buildConfigField("String", "NAVERMAP_CLIENT_ID", properties.getProperty("NAVERMAP_CLIENT_ID"))

 

근데 지금 우리는 AndroidManifest.xml에서 사용해야되기때문에 addManifestPlaceholders()함수를 사용해서 추가해줘야한다!!

...

val properties = Properties().apply {
    load(FileInputStream(rootProject.file("local.properties")))
}

android {
    defaultConfig {
        ...
        addManifestPlaceholders(mapOf("NAVERMAP_CLIENT_ID" to properties.getProperty("NAVERMAP_CLIENT_ID")))
    }
    
   buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    
    ... 
    
    buildFeatures {
        buildConfig = true
    }

 build.gradle

 

 

이제 AndroidManifest.xml에서 이렇게 사용하면된다

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value= "${NAVERMAP_CLIENT_ID}" />
    </application>
</manifest>

AndroidManifest.xml

 

 

 

 

 

이제 진짜 마지막으로 FragmentContainerView를 뷰에 선언해주면 지도가 잘 뜨는것을 확인할 수 있다

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".presentation.fragment.EvacuateFragment">


    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/map_fragment"
        android:name="com.naver.maps.map.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

fragment_main

 

 

 

 

 

 

 

 

[로컬프로퍼티 관련해서 참고했던 블로그 자료]

https://dino-dev.tistory.com/76

(Android) 네이버/카카오 API 키 안전하게 관리하기