[Android/Kotlin] Naver map SDK 이용한 지도 구현하기

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

소개 · 네이버 지도 안드로이드 SDK

이 글은 네이버에서 제공하는 안드로이드 SDK를 참고하여 작성하였습니다.

​

네이버 지도 SDK는 안드로이드 OS 버전 4.0.3(API 레벨 15) 이상에서 사용할 수 있습니다.

​

 

​SDK 사용을 위한 앱 등록 및 클라이언트 ID 발급

https://www.ncloud.com

NAVER CLOUD PLATFORM

 

 

 

 

 

첫 서비스 등록 시 결제수단을 연결 해야합니다

​

의존성 추가

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

 

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

 

Manifest meta data 추가

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

 

Fragment, .xml 수정하기

​

수정 전 설명

xml에선 네이버에서 제공하는 MapFragment와 ​MapView로 나뉘며

​

MapFragmnet는 Activity MapView는 Fragment로 구현합니다.

​

네이버에서 가장 권장하는 MapFragement의 장점은 라이프 사이클에 메소드 호출 생략이며

​

만약 MapView를 사용시 메소드를 호출하지 않으면 지도가 동작하지 않습니다.

저는 Fragment로 구현 했기 때문에 MapView로 지정하겠습니다.

​

.xml 코드

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.naver.maps.map.MapView
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/map_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:ignore="NamespaceTypo"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

.kt 코드

onCreateView(), onViewCreated()

onStart(), onResume(), onPause() 등 필수 메소드를 추가

 

class NearLocation : Fragment(), OnMapReadyCallback {
    
    //mapView를 받아오기 위해 변수 설정
    private lateinit var mapView: MapView

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_near_location, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        mapView = view.findViewById(R.id.map_view)
        mapView.onCreate(savedInstanceState)
        //getMapAsync 메서드를 호출하여 프래그먼트에서 콜백을 설정
        //getMapAsync() ↔ onMapReady
        mapView.getMapAsync(this)
    }

    //뷰 시작시 위치 이동
   override fun onMapReady(naverMap: NaverMap) {
        //초기 위치 설정, 위도 경도
        val cameraUpdate = CameraUpdate.scrollTo(LatLng(37.562238,127.065175))
        naverMap.moveCamera(cameraUpdate)
    }

    //이 아래부턴 생명주기입니다. MapView 사용시 필수
    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 onDestroyView() {
        super.onDestroyView()
        mapView.onDestroy()
    }

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

MapView가 프래그먼트에 포함될 경우 프래그먼트의 onCreateView() 또는 onViewCreated()에서 onCreate()를, onDestroyView()에서 onDestroy()를 호출해야 합니다.

 

결과 화면

 

다음 글은 네이버 지도 SDK를 통해 현재 위치를 띄우는 기능을 구현하겠습니다.

https://just-coding-record.tistory.com/29

[Android/Kotlin] 실시간 위치 구현하기 with Naver map SDK