지도 API
지도 API란 웹사이트와 모바일 응용 프로그램에서 지도를 이용한 서비스를 제작할 수 있도록 다양한 기능을 제공하는 인터페이스(I/F)다. 대표적으로 카카오 지도 API, 구글 Maps API, 네이버 지도 API가 있다.
개요
지도 API는 웹사이트와 모바일 응용 프로그램에서 지도를 이용한 서비스를 제작할 수 있도록 제공하는 인터페이스다. 오픈 API의 경우 누구나 사용할 수 있도록 공개된 API로 구글이나 네이버의 지도 서비스 등이 있다.
특징
지도 API는 다양하게 제공되어있는데 개발사에 따라 사용법과 특징이 다르다.
카카오 지도 API
카카오 지도 API는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 다양한 기능을 제공하고 있다. 지도 API는 무료로 제공되고 있으며, 지도 APP KEY를 등록하고 나서 사용이 가능하다. 단, 하루에 300,000회만 사용이 가능하다.[1]
웹
웹에서 카카오 지도 API를 사용할 경우 지도 위에 마커를 올려 특정 장소를 표시할 수 있다. 특정 장소를 표시하면서 장소 명칭, 간단한 소개글도 함께 표시할 수 있어 자유로운 형태를 만들 수 있다. 마커 뿐만 아니라 지도 위에 다양한 도형을 그릴 수 있다. 선, 원, 다각형 등의 도형을 그려 도형의 실제 크기, 면적값을 함께 확인할 수 있다. 그리고 원하는 위치에 원하는 컨텐츠 표시가 가능하다. 지도 위에 HTML로 구현 가능한 모든 컨텐츠를 올릴 수 있으며 CSS를 이용해 자유롭게 꾸미기도 가능하다. 추가로 로드뷰를 활용할 수 있다. 지도 상으로 위치가 어떻게 생겼는지 확인하기에는 너무 부족하기도 하며 어떻게 생겼는지 확인하기 위해서는 사진이나 동영상같은 기능이 필요하다. 이 때 실제 주변을 확인하기 위해 로드뷰를 사용한다. 로드뷰에 마커를 올려 장소를 표시할 수도 있으며, 자신이 원하는 위치 주변을 확인할 수 있다.[1]
안드로이드
안드로이드에서 카카오 지도 API를 사용할 경우 자유로운 형태의 마커를 사용할 수 있다. 마커를 이용해서 지도 위에 특정 장소들을 표시할 수 있으며, 원하는 이미지로 색다른 마커를 만들 수 있다. 그리고 지도 위에 라인을 표시해 경로 좌표 데이터를 이용할 수 있다. 그리고 커스텀뷰를 올릴 수 있는데, 지도 위에 마커와 연동되는 말풍선을 함께 올릴 수 있어 원하는 스타일로 자유롭게 꾸밀 수 있다. 또한, 현재 위치를 지도 위에 바로 표시할 수 있다. 트래킹 모드를 설정할 시 지도의 중임이 자동으로 변형되며, 나침반 모드를 사용해 사용자가 바라보는 방향에 맞춰 지도 방향이 회전하도록 만들 수 있어 트래킹 모두와 함께 사용하면 다양한 분야에서 활용이 가능하다.[1]
아이오에스
아이오에스는 지도위에 라인을 표시할 수 있다. 지도 위에 경로 좌표 데이터를 이용해 다양한 형태로 활용할 수 있다. 그리고 커스텀뷰를 지도 위에 올릴 수 있다. 지도 위에 마커를 이용해 특정 장소를 표시할 수 있으며 원하는 이미지로 마커를 생성할 수도 있다. 이 마커와 연동되는 말풍선을 커스텀뷰라고 하는데, 자신이 원하는 스타일로 자유롭게 꾸며 지도 위에 올릴 수 있다. 그리고 안드로이드와 동일하게 현재 위치를 지도 위에 바로 표시할 수도 있으며, 나침반 모드로 사용자가 바라보는 방향으로 회전또한 가능하다.[1]
네이버 지도 API
네이버 지도 기능을 활용해 다양한 위치 기반 서비스를 만들 수 있다. 웹 서비스 또는 애플리케이션에 네이버 지도를 활용할 수 있도록 다양한 기능을 제공한다. 간단한 약도부터 주변 맛집이나 유명 관광지 표시까지, 요청하는 여러 정보들을 지도 위에 표현할 수 있다. 네이버 지도는 네이버와 관련된 전문기관들의 신뢰할 수 있는 정보들로 구성되어 있으며, 다년간 네이버 지도를 서비스하며 축적해 온 노하우를 활용하여 지속적으로 개선하고 발전시켜가고 있다. 대한민국에서 가장 많은 사용자가 이용하는 국내 최대 지도 서비스로, 수시 업데이트를 통해 최신의 지도 정보를 유지한다. 또한, 네이버 지도를 이용하는 사용자들로부터 매일 접수 받은 수 많은 지도 수정 요청을 실시간으로 반영하여 최신의 데이터를 제공한다. 그리고 다양한 위치기반 서비스를 제공한다.[2]
위치기반 서비스는 물류, 관제, 통신, 유통 등 여러 사업 분야에서 이용할 수 있는 Maps, Directions, Places 관련 다양한 API 기능들이 제공된다. 높은 품질의 지도 데이터와 다양한 기능의 API를 이용하여 위치와 이동 관련 비즈니스를 하는 사업자들이 보다 쉽고 편리하게 경쟁력 있는 서비스를 구축할 수 있다. 또한 네이버 지도 서비스에서 사용 중인 최신의 POI 정보를 제공하며 네이버 지도 검색 사용자수와 클릭 수에 근거한 신뢰도 높은 랭킹 모델이 반영된다. 그리고 웹 기반의 콘솔에서 서비스 등록, 이용량 상한선 설정, 이용량 통계조회 등 다양한 관리 작업을 편리하게 처리할 수 있어 사용이 손쉽다.[2]
상세기능
네이버 지도의 풍부한 데이터를 이용하여 품질 높은 위치와 이동 기반의 정보 서비스를 제공한다.
제공 서비스
Map Directions Places Web Dynamic Map Moblie Dynamic Map static Map Diretions Geocoding Reverse Geocoding
상품구분 상품명 상품설명 제공방식 Web JS Android SDK IOS SDK REST API Maps 정적 및 동적 지도, 벡터 지도 등 각 서비스 용도에 맞게 선택할 수 있으며 사용자에게 장소의 실제 모습을 생생하게 보여줄 수 dlT다.
Web Dynamic Map 패닝, 줌인아웃 등 인터랙티브가 가능한 동적 지도를 보여준다. O Mobile Dynamic Map 네이버 지도 애플리케이션에서 사용하는 기능을 기본으로 제공한다. O O Static Map 요청된 URL 매개변수를 기반으로 웹 페이지에 표시할 수 있는 이미지로 지도를 반환한다. O Directions 네이버 지도가 보유한 다양한 데이터와 실시간 교통정보로 사용자에게 출발지에서 목적지까지 가는 최적의 경로를 찾아줄 수 있다.
Directions 사용자가 지정한 출발지/목적지 정보에 따라 경로 관련 정보를 제공한다. O Places 높은 장소 커버리지에 대한 풍부한 위치 데이터로 사용자가 원하는 장소를 주소, 전화번호, 업체명 등으로 검색해볼 수 있다.
Geocoding 주소의 텍스트를 입력받아 좌표를 포함한 상세정보들을 제공한다. O O Reverse Geocoding 좌표를 통해 주소 정보를 반환합니다. O O
활용
카카오 지도 API
카카오맵 자바스크립트 API는 키를 발급받아야 사용할 수 있으며, 키를 발급받기 위해서는 카카오 계정이 필요하다. 라이브러리를 사용하기 위해서는 파라메터에 추가해 로드하고 난 뒤, 사용해야 한다. 라이브러리 토큰 부분에 사용하고자하는 이름을 적으면 해당 라이브러리를 불러올 수 있다.
키 발급
카카오 개발자 사이트에 접속해 개발자 등록과 앱을 생성한다. 그리고 자신이 원하는 플랫폼을 추가/등록한다. 이후에 웹과 아이오에스, 안드로이드의 키 등록법과 사용법이 다르다. 안드로이드의 경우 키 해시를 등록하고 페이지 상단의 네이티브 앱 키, 등록한 패키지명, 키 해시를 사용한다. 이 때, 등록된 키 해시와 일치하는 앱에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해야한다.
웹 플랫폼을 추가했을 때는 사이트 도메인을 등록한다. 페이지 상단의 자바스크립트 키를 지도 API의 appkey로 사용한 뒤 앱을 실행한다. 등록한 도메인에서 웹 서버를 실행시켜 아래 파일을 연다.
# 폴더 이동 $ cd /path/to/your/folder/ # 테스트용 서버 실행 $ python -m SimpleHTTPServer 8080
그리고 브라우저를 열어 위 도메인에 접속한다. 등록된 사이트 도메인에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해야한다.
아이오에스에서 카카오 지도 API를 사용할 때는 번들 아이디를 사용한다. 아이오에스 플랫폼을 등록하고 번들 아이디를 등록한 뒤, 페이지 상단의 네이티브 앱 키와 등록한 번들 아이디를 사용한다. 아이오에스 앱의 번들 아이디는 Info.plist 파일의 번들 아이덴티피어 프로퍼티에 설정된다. [[NSBundle mainBundle] bundleIdentifier] 메소드를 이용해서 번들 아이디를 확인할 수 있다. 등록된 번들 아이디와 일치하는 앱에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해줘야한다. 그리고 Info.plist 파일에 다음과 같은 항목으로 앞 단계에서 발급받은 앱 키를 설정한다.[1]
- Key name : KAKAO_APP_KEY - Value Type : String - Value : 발급받은 APP KEY
웹
지도 영역 만들기
우선 지도를 담기 위한 영역을 생성한다. 지도를 담을 영역으로 스타일이 지정된 div태그를 선언한다. div태그의 아이디 값은 map으로 지정한다.
지도 자바스크립트 API 불러오기
'//'라는 상대 프로토콜을 사용하면, 사용자의 HTTP, HTTPS 환경에 따라 자동으로 해당 프로토콜을 따라가게 된다. API를 로딩하는 스크립트 태그는 HTML파일 안의 head, body 등의 어떠한 위치에 넣어도 상관없다. 하지만 반드시 실행 코드보다는 먼저 선언되어야한다.
지도 띄우기
맵 객체의 두 번째 파마메터로 넣는 옵션의 속성 중, 센터는 지도를 생성하는데 반드시 필요하다. 센터에 할당할 값은 LatLng 클래스를 사용하여 생성한다. 흔히 위경도 좌표라고 부르는 WGS84 좌표계의 좌표값을 넣어서 만드는 것으로, 생성인자는 위도, 경도 순으로 넣는다.
안드로이드
라이브러리 파일 추가
안드로이드 카카오 맵 라이브러리는 libDaumMapAndroid.jar 와 아키텍쳐별로 libMapEngineApi.so 세개의 바이너리로 구성되어 있다. libDaumMapAndroid.jar은 /app/libs/에 복사하고 libMapEngineApi.so 파일은 /app/source/main/jniLibs로 아키텍쳐별 디렉토리 하에 복사한다. AndroidManifest.xml 에 Permission 과 APP KEY를 추가한다.[1]
코드 구현
맵 뷰를 띄우는 것은 net.daum.mf.map.api.MapView 객체를 생성하여 Activity 의 content-view 에 삽입하면 지도화면을 손쉽게 구현할 수 있다. 맵 뷰의 이벤트를 감지하는 방법은 MapView.MapViewEventListener, MapView.POIItemEventListener, MapView.OpenAPIKeyAuthenticationResultListener 등의 Interface 를 구현해 각 이벤트 발생에 대한 결과를 통보받을 수 있다. 그리고 구현한 인터페이스 객체는 맵뷰 내 설정자 메소드로 등록한다.
지도 중심점, 레벨 변경은 맵뷰 클래스가 제공하는 메소드를 이용하여 손쉽게 지도 중심점과 지도 확대/축소를 변경할 수 있다. 그리고 지도뷰 위에 올라가는 마커를 생성할 수 있는데, 다음 지도에서 제공하는 기본 마커 외 커스텀 마커도 올릴 수 있다. 마커 관련 이벤트는 MapView.POIItemEventListener Interface를 구현함으로써 감지 가능하다. 그리고 지도뷰 위에 폴리라인과 원을 그릴 수 있으며, 리버스 지오코딩을 통해 지도 자표로 주소 정보를 가져올 수 있다.
아이오에스
아이오에스 앱 개발시 카카오 지도 아이오에스 API 를 사용하면 앱 내에 지도를 만들 수 있다. 웹에서 사용하는 자바스크립트 API와는 달리 네이티브 수준에서 동작하기 때문에 아이오에스용 앱과 더욱 긴밀하게 동작이 가능하다.[1]
라이브러리 추가
SDK 를 다운받아서 압축을 풀고 DaumMap.embeddedframework 폴더를 애플리케이션 프로젝트로 복사한다. 복사한 DaumMap.embeddedframework 폴더 전체를 프로젝트에 추가 한다. Add Files to "프로젝트명" 을 클릭한다. 또는 파인더에서 폴더를 Xcode 프로젝트 내의 프레임워크 그룹으로 드래그한다. Create groups for any added folders 항목과 추가하고자 하는 Target 에 체크가 되어 있는지 확인한다. 그리고 프로젝트의 타겟은 다음맵 프레임워크가 사용하는 프레임워크들을 추가 해야 한다.
- OpenGLES.framework - SystemConfigure.framework - CoreLocation.framework - QuartzCore.framework - libc++.tbd - libxml2.tbd - libsqlite3.tbd
추가하고자 하는 타겟 설정 에서 General 또는 Build Phases 탭의 Link Binary With Libraries 항목 하단에 나타나는 '+' 버튼을 이용하여 프레임워크들을 추가한다.
소스 코드
카카오 지도 아이오에스 API에서는 클래스명 앞에 모두 MT 라는 접두사가 붙습니다. 여기서 MT는 모바일 툴킷을 의미하며, 카카오의 모바일 라이브러리 표준 네이밍이다. 지도에서 발생하는 각종 이벤트들을 통보받기 위해서는 MTMapViewDelegate 프로토콜을 구현하는 객체를 MTMapView 의 대리자 프로퍼티에 등록야한다. baseMapType 프로퍼티를 이용하여 지도 종류를 선택할 수 있으며, 지도 종류는 기본 지도, 위성 지도, 하이브리드 지도가 제공된다.
MTMapView 클래스가 제공하는 메소드를 이용하여 손쉽게 지도 중심점과 지도 확대/축소 레벨을 변경할 수 있다. 그리고 지도 위에 마커를 추가하고 이벤트를 처릴할 수 있다. 마커를 표시하기 위해서는 MTMapPOIItem 객체를 생성하여 MTMapView 객체에 등록해 주어야 한다. 기본 제공되는 핀타입의 POI Item 을 추가할 수도 있고, 개발자가 지정하는 이미지 가 표시되도록 설정할 수도 있다. 사용자가 손으로 끌어서 위치를 변경할 수 있는 Draggable POI Item 을 생성할 수도 있다.
선이나 원을 그릴 때, MTMapPolyline 객체를 생성하고 MTMapView 객체에 등록하여 지도 위에 선을 그릴 수 있다. Polyline을 구성하는 점들을 지정하고, 선 색상 을 지정할 수 있다. 그리고 MTMapCircle 객체를 생성하고 MTMapView 객체에 등록하여 지도 위에 원을 그릴 수 있다. Circle의 범위 와 색 또한 지정할 수 있다.
단말기의 현재 위치에 따라 지도화면이 이동하도록 하는 현위치 관련 기능을 손쉽게 사용할 수 있는데, 현위치 트래킹 모드느 지도화면 중심을 단말의 현재 위치로 이동시켜주는 모드이고, 나침반 모드는 단말의 방향에 따라 지도화면이 회전되는 모드이다. 현위치에서 트래킹 모드 만 실행하거나 현위치 트래킹 모드 , 나침반 모드 둘 다 실행시킬 수 있다. 현위치 트래킹/나침반 모드를 활성화 시키면 현위치 정보가 MTMapView 객체에 등록된 MTMapViewDelegate 객체에 전달된다.
네이버 지도 API
네이버 지도 기능을 활용해 다양한 위치 기반 서비스를 만들 수 있다.[2]
적용 서비스
- 네이버 지도 : 빠른 길찾기, 버스는 물론 지하철 노선도까지 원하는 장소를 한 번에 찾을 수 있다.
- 네이버 부동산 : PC, 모바일에서 집을 찾을 땐 네이버 부동산에서 지도로 쉽고 편리하게 찾을 수 있다.
서비스 이용 한도
맵스 API 이용 한도는 최대 이용한도 내에서 콘솔을 통해 직접 조정할 수 있다.
상품명 최대 이용한도(Client ID 당 월간 이용가능 횟수) Mobile Dynamic Map 제한 없음 Web Dynamic Map 10,000,000 건 Static Map 3,000,000 건 Geocoding 3,000,000 건 Reverse Geocoding 3,000,000 건 Directions 5 5,000,000 건 Directions 15 5,000,000 건
요금
이용량은 이용횟수 단위로 책정된다.
서비스 구분 서비스 상세 과금 단위(건) 사용량 구간 이용요금(원) 비고 Web Dynamic Map - - 무료 - Mobile Dynamic Map - - 무료 - Static Map - - 무료 - Geocoding - - 무료 - Reverse Geocoding - - 무료 - Directions Directions 5 (최대 경유지 검색 5개)
이용 횟수 - 5원/건 ※ 기존과 같이 사업자 당 대표계정 1개에 한해 월 60,000건의 무료이용량을 제공 Directions 15 (최대 경유지 검색 15개)
이용 횟수 - 20원/건 ※ 기존과 같이 사업자 당 대표계정 1개에 한해 월 3,000건의 무료이용량을 제공
각주
참고자료
- Kakao Maps API - https://apis.map.kakao.com/
- 네이버 지도 API - https://www.ncloud.com/product/applicationService/maps
