본문 바로가기

Front-End/Android

[Android (Kotlin)] 네이버 지도 API 연결하기

728x90

안드로이드 앱에서 네이버 지도 API 를 연결해보겠습니다.

 

1. 우선 네이버 클라우드 플랫폼 에 접속해 회원가입을 합니다. (네이버 간편 로그인으로 해도 무방합니다)

2. 아래와 같이 오른쪽 상단에 나와있는 메뉴 버튼을 클릭해, 서비스 > Application Services > Maps 를 클릭합니다.

오른쪽 상단 메뉴 버튼 클릭

 

서비스 > Application Services > Maps 클릭

 

3. 이용 신청하기 버튼을 클릭하면, 아래와 같이 Application 보드가 나옵니다. Application 등록 버튼을 클릭해서 Application 이름을 설정하고, Maps > Mobile Dynamic Map 을 선택합니다. 이외에, 필요한 API 들을 자유롭게 체크하시면 됩니다.

Application 등록 버튼 클릭

 

프로젝트 설정

 

4.  Android Studio 에서 프로젝트를 하나 생성하고, 이 때 만들어진 패키지 이름을 아래와 같이 네이버 Application 보드에 입력한 후, 추가 버튼을 클릭하고 아래 등록 버튼을 클릭합니다.

서비스 환경 등록

 

5. 아래와 같이 Map 애플리케이션이 등록되었음을 확인할 수 있습니다. 인증 정보 버튼을 클릭하면 Client ID Client Secret 이 나오는데 이 두 가지는 앱과 연동할 때 꼭 필요한 부분입니다.

Map 애플리케이션 등록

 

6. 다시 Android Studio 로 돌아와서 settings.gradle 에 아래의 코드를 넣어주고, Sync now 를 클릭합니다.

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

 

7. 앱 모듈의 build.gradle 에 아래와 같이 네이버 지도 SDK 에 대한 의존성을 선언하고, compileSdk 버전이 33 인지 확인한 후, Sync now 를 클릭합니다.

android {
    namespace 'com.example.map'
    compileSdk 33
    /* 중략 */
}

dependencies {
    // 네이버 지도 SDK
    implementation 'com.naver.maps:map-sdk:3.16.2'
}

 

8. 위의 5번에서 발급받은 클라이언트 ID 를 SDK 에 지정합니다. AndroidManifest.xml 에 아래와 같이 작성합니다.

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="발급받은 클라이언트 ID 이곳에 입력" />
    </application>
</manifest>

 

9. MainActivity 에서 아래와 같이 API 를 호출해 클라이언트 ID 를 지정합니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        NaverMapSdk.getInstance(this).client =
            NaverMapSdk.NaverCloudPlatformClient("발급받은 클라이언트 ID 입력")
    }
}

 

10. <fragment> 요소로 XML 레이아웃에 MapFragment 를 추가해 지도를 화면에 나타냅니다.

<fragment
    android:id="@+id/map_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.naver.maps.map.MapFragment" />

 

11. gradle.properties 에 아래와 같이 적어준 후, Sync now 를 클릭합니다.

 

12. 애뮬레이터를 실행해보면 다음과 같이 지도가 뜨는 것을 확인할 수 있습니다.

지도 불러오기 성공

 

728x90