네이버 지도 SDK 사용하기

안녕하세요~ 6월의 시작이네요. 점점 여름이 다가오는 듯 합니다.

오늘은 숙소를 표시하기 위해 필요한 네이버 지도를 연동하는 방법을 알아보겠습니다! 😀

1. 네이버 클라우드 플랫폼에서 애플리케이션 등록하기

 

먼저 네이버 클라우드 홈페이지를 접속한 다음, 로그인을 해줍니다. 그 다음에는 콘솔창을 누릅니다.

 

네이버에서 다양한 서비스를 제공해주는데요. 저희는 네이버 지도가 필요하기 때문에 Application Services 에서 Maps 를 선택합니다. 

 

하단의 이용 신청을 눌러주고 이후에 나오는 어플리케이션 등록 버튼도 눌러줍니다.

 

여기서는 Application 에 대한 정보를 기입해야 합니다. Application 이름, API 선택, Android 앱 패키지 이름이 필요합니다.

 

API 선택은 꼭 Dynamic Map 으로 해주어야 합니다. 앱 패키지 이름 옆의 추가 버튼을 누른 후 하단의 등록 버튼을 눌러줍니다.

이렇게 어플리케이션이 등록된걸 확인할 수 있습니다! 인증 정보를 클릭해봅시다. 

 

Client ID 와 Client Secret 키가 발급이 되는데요. 해당 값은 유출되면 안되기에 가려놨습니다.

네이버 지도 SDK 를 사용하기 위해 필요한 Client ID 가 있으니 안드로이드 스튜디오 IDE 로 돌아가봅시다!

2. 프로젝트에서 네이버 지도 등록하기

2-1. 의존성 추가

가장 먼저 할 일은 의존성을 추가하는 것입니다. 프로젝트 단위인 settings.gradle 과 모듈 단위 build.gradle 에 아래와 같이 의존성을 추가해줍니다.

// settings.gradle.kts
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven("https://repository.map.naver.com/archive/maven") // 해당 코드 추가하기
    }
}

 

settings.gradle.kts 에 추가할 때는 pluginManagement 가 아닌 dependencyResolutionManagement 에 추가해줍니다.

// build.gradle.kts(:app)
dependencies {
	implementation("com.naver.maps:map-sdk:3.21.0") // 네이버 맵
}

 

2-2. 매니페스트 등록

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

 

메니페스트에 <application> 아래에 <meta-data> 요소를 추가합니다. android:name 은 이렇게 작성해주고, value 로는 아까 받아온 클라이언트 ID 를 넣어줍니다. 

3. 뷰에 네이버 지도 띄우기

3-1. XML 설정하기

네이버 지도를 띄우기 위한 설정이 끝났습니다. 이제 XML 에서 MapView 를 사용해줍니다.

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".NaverMapActivity">

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

</androidx.constraintlayout.widget.ConstraintLayout>

 

3-2. MapView 연결하기

class NaverMapActivity : AppCompatActivity() {
	private lateinit var mapView: MapView
    override fun onCreate(savedInstanceState: Bundle?) {
    	mapView = binding.naverMapView
        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 onStop() {
        super.onStop()
        mapView.onStop()
    }

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

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

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

 

먼저 MapView 를 바인딩으로 연결해준 다음 액티비티 라이프 사이클에 맞춰서 호출해줍니다. 저는 액티비티를 기준으로 했는데 프래그먼트 같은 경우는 OnCreateView() 또는 onViewCreate() 에서 onCreate() 를, onDestroyView() 에서 onDestroy() 를 호출합니다. 

3-3. NaverMap 객체 얻어오기

class NaverMapActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mapView: MapView
    private lateinit var naverMap: NaverMap
    
    override fun onCreate(savedInstanceState: Bundle?) {
    	mapView = binding.naverMapView
        mapView.onCreate(savedInstanceState)
        mapView.getMapAsync(this)
    }
    
    override fun onMapReady(naverMap: NaverMap) {
        this.naverMap = naverMap
    }
}

 

MapView 는 지도에 대한 뷰 역할만을 담당하기 때문에 API 를 호출하기 위해서는 인터페이스 역할을 하는 NaverMap 객체가 필요합니다. OnMapReadyCallback 이라는 인터페이스를 상속받은 후에 MapView 의 getAsync 메서드의 파라미터로 전달하면 비동기적으로 NaverMap 객체를 얻을 수 있습니다. NaverMap 객체가 준비가 되면 onMapReady 콜백 메서드가 호출됩니다. 이때, 지연 초기화로 지정한 변수에 NaverMap 객체를 연결하면 됩니다. 이후에 앱을 빌드하면 아래와 같이 나오게 됩니다.

Naver Map 맨 초기 화면

 

네이버 지도의 화면이 나오는 것을 볼 수 있습니다. 지도가 조금 보기에 밋밋하니 다른 설정도 같이 해보도록 합시다.

4. 네이버 지도 마커 표시하기

private val dummyData = listOf(
    AccommodationInfo(
        name = "시청 프리미엄 호텔",
        pricePerNight = 120000,
        address = "서울 중구 세종대로 110",
        image = R.drawable.img_stay_1,
        latitude = 37.5665f,
        longitude = 126.9780f
    ),
    ...
)

override fun onMapReady(naverMap: NaverMap) {
    // NaverMap 객체가 준비되면 호출됨
    this.naverMap = naverMap
    // 마커 표시
    val markers = dummyData.map {
        Marker(LatLng(it.latitude.toDouble(), it.longitude.toDouble())).apply {
            captionText = it.name
            map = naverMap
        }
    }
}

 

일단 마커를 표시할 데이터가 먼저 필요합니다. 데이터 타입은 data class 로 지정해줍니다. 이때, 마커에 필요한 변수는 name(숙소 이름), latitude(위도), longitude(경도) 가 있습니다. 

val marker = Marker()
marker.position = LatLng(it.latitude.toDouble(), it.latitude.toDouble()
marker.captionText = it.name
marker.map = naverMap

 

다시 보기 쉽게 마커 관련된 코드만 정리해보았습니다. Marker 객체에다가 position, captionText, map 을 지정해줍니다. position 에는 LatLng(latitude, longtitude) 를 넣어야하는데요. 이때 타입은 Float 가 아닌 Double 로 넣어야합니다. captionText 에는 숙소 이름을 넣어줍니다. 마지막으로 map 에다가 NaverMap 객체를 전달해줍니다.

마커 표시하기

 

이렇게 네이버 지도에다가 마커, 숙소의 이름을 경도 위도에 맞게 표시한 것을 볼 수 있습니다.

5. 추가 기능(하단 다이얼로그, 카메라 이동)

하단 다이얼로그 띄우기

 

마커까지 표시했으면 숙소 리스트를 보기좋게 bottom sheet dialog 를 통해 띄울 수도 있습니다. 이후 각 목록을 클릭했을 때 지도의 위치를 해당 숙소 쪽으로 이동시킬 수도 있는데요. 이 내용은 다음에 기존 글을 수정하거나 추가 글로 포스팅해서 올려보도록 하겠습니다!