🙋‍♀️ Android

[Android] 네이버 지도 API 연동

수댕ʕت̫͡ʔ 2024. 4. 24. 23:41

오늘은 네이버 지도 API를 연동해보았다.

 

1. 먼저 네이버 클라우드 플랫폼으로 이동하고 로그인을 한다. 그리고 AI NAVER API 로 이동해 Application 등록을 해준다. 이때 안드로이드 패키지를 입력해줘야 한다.

 

그럼 다음과 같이 클라이언트 ID를 확인할 수 있다. 이제 여기까지 세팅 끝~! 아주 간단하다.

 

이제 안드로이드로 가보자.

 

나는 아래의 가이드를 참고하였다.

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

 

지도 객체 · 네이버 지도 안드로이드 SDK

지도 객체 하나의 지도는 뷰 요소와 인터페이스 요소로 구성됩니다. 뷰 요소는 화면에 지도를 나타내는 역할을 하며, MapFragment와 MapView가 여기에 해당합니다. 지도를 다루는 인터페이스 역할을

navermaps.github.io

 

 

1. 문서에는 build.gradle에 추가하라고 되어있지만 setting.gradle에 아래를 추가해야한다.

allprojects {
    repositories {
        google()
        mavenCentral()
        maven("https://repository.map.naver.com/archive/maven")
    }
}

 

그리고 build.gradle에는 아래의 코드를 추가한다.

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

 

 

2. 다음으로 AndroidManifest.xml에 클라이언트 아이드를 지정한다.

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

 

3. 그리고 나는 fragment를 사용하지 않고 액티비티에 mapView를 적용했다. 먼저 xml 코드에 mapView를 적용한다.

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

        <com.naver.maps.map.MapView
            android:id="@+id/map_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

 

4. 그리고 액티비티에 다음과 같이 코드를 작성했다.

package com.example.toyproject

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.naver.maps.map.MapView

class MainActivity : AppCompatActivity() {
    private lateinit var mapView: MapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mapView = findViewById(R.id.map_view)
        mapView.onCreate(savedInstanceState)


    }

    override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }
}

 

 

5. 결과 화면