[Android/Kotlin] Naver Map API 사용법 및 예제(1)

Naver Map Api 사용해서 지도 기능 구현해보기

🧾[Android/Kotlin] Naver Map API 사용법 및 예제(1)

📌[Android/Kotlin] Naver Map Api 사용법

네이버 지도 SDK를 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야한다.

로그인 후에 해당 링크에 접속 후 이용 신청하기 버튼을 눌러주면 된다.

naver Map Services

다음으로 Application등록 버튼을 누르고

해당 화면이 뜨게된다.

Service 선택부분에 Maps에서 Mobile Dynamic Map만 선택하고, 아래 서비스 환경 등록에는 Android 앱 패키지 이름에 프로젝트의 패키지 이름을 고대로 복붙해서 넣으면 된다.

그러면 이런식으로 신청이 완료된 모습이다. 여기서 우리가 필요한 인증 정보는 Client ID이므로 복사해서 잘 간직하고 있으면 된다.

📌네이버 맵 Api 사용

build.gradle(:app)

implementation 'com.naver.maps:map-sdk:3.16.2'
implementation("com.google.android.gms:play-services-location:16.0.0")

build.gradle(project)

buildscript {
    repositories {
        google()
        mavenCentral()
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
    }
}

settings.gradle(project)

repositories {
        google()
        mavenCentral()
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
    }

의존성은 다음과 같이 추가하면 된다. 이전에 Client ID를 복사해 왔을것이다. 그건 어떻게 써야하는걸까?

api_key

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="naver_map_api_key">여기에 붙여넣기</string>
</resources>

res/values에 이와같이 string값을 만들어준다.

AndroidManifest.xml

<meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="@string/naver_map_api_key"/>

저장한 Client ID를 이와같이 Manifest의 application태그 안에 넣으면 된다.

이렇게 설정을 모두 마쳤으면 네이버 맵을 사용할 수 있게 되었을 것이다. 확인해보러 가자.

activity_map.xml

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

    <com.naver.maps.map.MapView
        android:id="@+id/naverMap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <com.naver.maps.map.widget.LocationButtonView
        android:id="@+id/currentLocationButton"
        android:layout_width="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginBottom="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>

MapView, LocationButtonView를 추가해도 빨간줄이 뜨지 않으면 일단 성공이다.

MapActivity.kt

class MapActivity: AppCompatActivity(), OnMapReadyCallback, Overlay.OnClickListener{
	private var naverMap: NaverMap? = null
    lateinit var binding: ActivityMapBinding
    
    private val markerClickListener = object : Overlay.OnClickListener{
        override fun onClick(overlay: Overlay): Boolean {           
            return false
        }
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)   
        binding = ActivityMapBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        mapView.onCreate(savedInstanceState)
        mapView.getMapAsync(this)
    }
    
    override fun onMapReady(map: NaverMap){
        naverMap = map
    }
    
    override fun onClick(p0: Overlay): Boolean {
        return markerClickListener.onClick(p0)
    }
}

이와 같이 NaverMap을 추가하고 onMapReady와 onClick또한 구성해준다.

그럼 이렇게 지도가 화면에 띄워지게 된다.

참고로 좌측 하단 네이버 로고는 개발 가이드상 가리면 안되므로 주의..!

여기까지 네이버 맵 신청 및 사용까지 해보았습니다. 다음 포스트에는 네이버 맵 사용법과 예제로 응용하는 시간을 가져보겠습니다. 안농~