[Android 적용] 네이버 지도 API(1) - 지도 띄우기(with.mapView)

🗺️ 네이버 지도 API 콘솔

네이버 클라우드에 들어간 뒤 콘솔 메뉴에 들어간다.

 

그 뒤 메뉴에서 Services를 클릭한 후

 

Services -> 메뉴 화면

AI.NAVER API 를 누르면 다음과 같은 화면이 나온다.

 

여기서 Application 등록을 누르고

 

Application 이름과 Mobile Dynamic Map을 클릭한다.

 

 

앱 패키지 이름도 등록해준다.

 

등록한 뒤 인증키 정보를 클릭하면

 

manifest.xml에 등록해야할 Client ID가 나온다.

 

🗺️  SDK 등록하기

이제 SDK를 등록해줘야 하는데 나의 경우 root 프로젝트에 allProjects가 존재하지 않기 때문에

settings.gradle에 다음과 같이 넣어주었다.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven("<https://repository.map.naver.com/archive/maven>")
    }
}

 

그 뒤 앱 모듈의 build.gradle에 의존성을 선언한다.

 // naverMap
    implementation("com.naver.maps:map-sdk:3.18.0")

🗺️  클라이언트 ID 지정

AndroidManifest.xml의 <meta-data>로 아까 콘솔에서 발급받은 클라이언트 ID를 지정해준다.

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

🗺️  지도 표시 - MapView

나는 MapFragment를 사용하지 않고 MapView를 사용했기 때문에 MapView를 넣어줬다.

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

 

MapView를 Fragment에서 사용할 때는 반드시 기존 Fragment 생명주기에 mapView 생명주기를 따로 지정을 해줘야한다. 아래 코드는 네이버 지도 문서에 나와있는 코드다.

class MapViewFragment : Fragment() {
    private lateinit var mapView: MapView

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup,
                     savedInstanceState: Bundle): View {
        // ...
    }

    override fun onViewCreated(view: View, @Nullable savedInstanceState: Bundle) {
        super.onViewCreated(view, savedInstanceState)
        mapView = view.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 onDestroyView() {
        super.onDestroyView()
        mapView.onDestroy()
    }

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

 

근데 이 코드는 작성하기에 너무 길어서 가독성이 떨어진다. 그래서 따로 추상 클래스로 BaseMapFragment를 만들어서 상속 받아 사용했다.

 

BaseMapFragment.kt

abstract class BaseMapFragment<T : ViewDataBinding>(private val layoutResId: Int) : Fragment(),
    OnMapReadyCallback {

    private var _binding: T? = null
    val binding get() = _binding!!

    abstract var mapView: MapView?

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? {
        _binding = DataBindingUtil.inflate(inflater, layoutResId, container, false)
        binding.lifecycleOwner = viewLifecycleOwner
        initOnCreateView()
        return binding.root
    }

    abstract fun initOnCreateView()

    override fun onMapReady(naverMap: NaverMap) {
        initOnMapReady(naverMap)

    }

    abstract fun initOnMapReady(naverMap : NaverMap)

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        iniViewCreated()
    }

    abstract fun iniViewCreated()

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

    override fun onResume() {
        super.onResume()
        mapView?.onResume()
    }
    abstract fun initOnResume()
    
    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()
        _binding = null
    }

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

}

 

주로 메소드가 실행되는 곳이 onCreateView() , onMapReady(), onViewCreated(), onResume() 이기 때문에 이 생명주기에 들어가는 메소드들을 추상 메소드로 따로 작성하여 오버라이드 하여 사용하도록 코드를 짰다.

 

mapView도 추상 프로퍼티로 지정해서 상속받는 MapFragment에서 얘를 초기화하여 사용하도록 nullable하게 지정하였다.

 

MapFragment.kt

class MapFragment : BaseMapFragment<FragmentMapBinding>(R.layout.fragment_map) {
			
	override var mapView: MapView? = null
			
	override fun initOnCreateView() {
			...
    }

    override fun initOnMapReady(naverMap: NaverMap) {
			...
    }

    override fun iniViewCreated() {
			...
    }

    override fun initOnResume() {
			...
    }
 
}

 

그 뒤 내가 사용할 MapFragment에 아까 만들어 둔 BaseMapFragment를 상속받고, 추상 프로퍼티와 추상 메소드로 만들어 놓은 애들을 오버라이드 해준다!

 

이렇게 까지 한 뒤 어플을 실행 하면 다음과 같이 지도가 나타나게 된다.

 

 

다음은 현재 위치 표시 방법에 대해 작성해보겠다.