[NMapsMap] Naver 지도 API 사용해보자

안녕하세요! 오늘은 Naver Cloud Platform에서 제공해주는 지도 API를 사용해보도록 할 거예요

제가 활동중인 연합동아리 S.O.P.T.에서 마지막 세미나로 진행했던 만큼 파트장님께 너무 감사하다는 말을 이 글에도 담아 봅니다⭐️

네이버 클라우드 플랫폼에 들어가보시면 정말 많은 서비스를 제공하고 있는 걸 확인할 수 있어요.

클라우드 서비스, Analytics 기능, 흔히 알고 있는 Clova, 그리고 많이 들어본 Jenkins툴까지... 물론 전부 무료는 아니랍니다.

이 중에서 오늘 저희가 사용할 서비스는 바로 오른쪽 하단 Application Servcie에 있는 MAP API입니다.

 

📌 네이버 클라우드 플랫폼 회원가입 

사용하기 전에 네이버 클라우드 플랫폼에 회원가입을 해주셔야 해요. 기본 정보를 등록하면 결제 수단을 선택하라고 나오는데 AWS와 비슷한 방식으로 사용하다가 무료 한도를 초과하면 과금이 나오는 방식이라 미리 카드정보를 입력하셔야 합니다.

 

결제 수단 등록까지 마쳤다면 이제 사용하러 가볼까요? 

저희는 iOS앱에 Map을 적용시켜볼 것이니 사용할 상품은 Mobile Dynamic Map이고 이는 무료라고 나와있어요 같은 경우는 사용한도가 없고요. 밑에 건당 요금이 부과되는 상품은 경유지를 이용해서 길을 찾는 경우인 것 같네요.

📌 Application 등록하기

네이버 개발자 문서에 가보면 어떻게 시작할 지 정말 자세하게 나와있습니다! 저는 간단하게만 적어볼게요.

네이버 클라우드 콘솔에 들어가시고 왼쪽 메뉴 탭에 Products&Service 클릭 -> AI, Naver API 클릭 -> 하단 Application 등록하기 버튼 클릭 

 

위 과정을 따라하시게 되면 Application 이름을 적고 사용할 서비스를 선택하고 서비스 환경을 등록해야 하는창이 나옵니다~ 서비스 환경은 xcode에서 Bundle Id를 복사 붙여넣기 하시면 등록은 완료됐습니다!

 

 

📌 cocoapods를 통해 SDK 설치

Pods파일에 아래 코드를 추가해주세요!

target 'NaverMapDemo' do

    pod 'NMapsMap'

end

요기서 문서에 아래와 같이 빨간색으로 주의하라고 나와있습니다. 이 라이브러리는 굉장히 큰 파일이기 떄문에 깃에 올리기 위해서는 git-lfs를 이용하라는 문구예요. 이를 설치안하면 바이너리 대신 설정 파일만 가져오게 되어 컴파일 오류가 납니다. 자세한 내용과 설치방안은 여기를 참고해주세요.

📌 SDK 지정하기

지도를 불러오기전에 SDK에 발급받은 클라이언트 ID를 지정해야 해요. 이는 두 가지 방법이 있는데 하나는 info.plist에 클라이언트 ID를 직접 추가하는 방식이고, 다른 하나는 API를 호출해서 지정하는 방식입니다. API 호출하는 방식이 더 간단해 보여서 이 방법을 채택할게요.

 

 

AppDelegate.swift파일내의 didFinishLaunchingwithOptions함수안에 저런식으로 클라이언트ID를 등록시켜 줍니다. 물론 NMapsMap라이브러리를 import시켜주어야하고요. 클라이언트ID는 네이버 클라우드 콘솔에 가보시면 인증 정보에서 찾으실 수 있습니다.

 

XIB나 storyboard등의 Interface Builder를 사용한다면 UIView를 추가하고, Custom Class로 NMFMapView를 지정해주고 실행시켜보면 시뮬레이터에 지도가 나오게 됩니다.

코드로 추가하는 방식은 아래와 같아요 

let mapView = NMFMapView(frame: view.frame)
view.addSubview(mapView)

📌 다양한 API 사용해보기

👉 현재 위치 얻기

// 현재 위치 얻기
let cameraPosition = mapView.cameraPosition
print(cameraPosition)

위 코드를 통해 위도, 경도, 줌 정도, 기울기, heading정보를 가져올 수 있어요.

👉 서울특별시청 위치 띄위기

 func setCamera() {
        
    let camPosition =  NMGLatLng(lat: 37.5670135, lng: 126.9783740)
    let cameraUpdate = NMFCameraUpdate(scrollTo: camPosition)
    mapView.moveCamera(cameraUpdate)
}

👉 서울특별시청 정보창 단 마커 띄우기

func setMarker() {
    let marker = NMFMarker()
    marker.position = NMGLatLng(lat: 37.5670135, lng: 126.9783740)
    marker.iconImage = NMF_MARKER_IMAGE_BLACK
    marker.iconTintColor = UIColor.red
    marker.width = 50
    marker.height = 60
    marker.mapView = mapView
    
    // 정보창 생성
    let infoWindow = NMFInfoWindow()
    let dataSource = NMFInfoWindowDefaultTextSource.data()
    dataSource.title = "서울특별시청"
    infoWindow.dataSource = dataSource
    
    // 마커에 달아주기
    infoWindow.open(with: marker)

}

 

 

👉 사용자와 상호작용

NMFMapView.touchDelegate속성에 델리게이트를 지정하면 지도를 탭했을 때의 몇가지 동작들을 제어할 수 있어요.

사용자가 지도를 탭했을 때 위도와 경도를 받아오는 함수를 쓰면 아래와 같이 받아오네요. 

navermaps.github.io/ios-map-sdk/guide-ko/3-1.html 이 링크에 들어가시면 더 다양한 APi들을 둘러보실 수 있습니다! 사용하시게 된다면 꼭!! 한 번 들어가보세요 ㅎㅎ

github.com/navermaps/ios-map-sdk 여긴 네이버에서 제공해주는 navermap에 대한 demoapp을 확인하실 수 있어요. 간단하게 어떤식으로 시작하는지 알 수 있을 것 같아서 가져와 보았습니다!