지도 API

지도 API란 웹사이트와 모바일 응용 프로그램에서 지도를 이용한 서비스를 제작할 수 있도록 다양한 기능을 제공하는 인터페이스(I/F)다. 대표적으로 카카오 지도 API, 구글 Maps API, 네이버 지도 API가 있다.

개요

지도 API는 웹사이트와 모바일 응용 프로그램에서 지도를 이용한 서비스를 제작할 수 있도록 제공하는 인터페이스다. 오픈 API의 경우 누구나 사용할 수 있도록 공개된 API로 구글이나 네이버의 지도 서비스 등이 있다.

특징

지도 API는 다양하게 제공되어있는데 개발사에 따라 사용법과 특징이 다르다.

카카오 지도 API

카카오 지도 API는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 다양한 기능을 제공하고 있다. 지도 API는 무료로 제공되고 있으며, 지도 APP KEY를 등록하고 나서 사용이 가능하다. 단, 하루에 300,000회만 사용이 가능하다.

웹

웹에서 카카오 지도 API를 사용할 경우 지도 위에 마커를 올려 특정 장소를 표시할 수 있다. 특정 장소를 표시하면서 장소 명칭, 간단한 소개글도 함께 표시할 수 있어 자유로운 형태를 만들 수 있다. 마커 뿐만 아니라 지도 위에 다양한 도형을 그릴 수 있다. 선, 원, 다각형 등의 도형을 그려 도형의 실제 크기, 면적값을 함께 확인할 수 있다. 그리고 원하는 위치에 원하는 컨텐츠 표시가 가능하다. 지도 위에 HTML로 구현 가능한 모든 컨텐츠를 올릴 수 있으며 CSS를 이용해 자유롭게 꾸미기도 가능하다. 추가로 로드뷰를 활용할 수 있다. 지도 상으로 위치가 어떻게 생겼는지 확인하기에는 너무 부족하기도 하며 어떻게 생겼는지 확인하기 위해서는 사진이나 동영상같은 기능이 필요하다. 이 때 실제 주변을 확인하기 위해 로드뷰를 사용한다. 로드뷰에 마커를 올려 장소를 표시할 수도 있으며, 자신이 원하는 위치 주변을 확인할 수 있다.

안드로이드

안드로이드에서 카카오 지도 API를 사용할 경우 자유로운 형태의 마커를 사용할 수 있다. 마커를 이용해서 지도 위에 특정 장소들을 표시할 수 있으며, 원하는 이미지로 색다른 마커를 만들 수 있다. 그리고 지도 위에 라인을 표시해 경로 좌표 데이터를 이용할 수 있다. 그리고 커스텀뷰를 올릴 수 있는데, 지도 위에 마커와 연동되는 말풍선을 함께 올릴 수 있어 원하는 스타일로 자유롭게 꾸밀 수 있다. 또한, 현재 위치를 지도 위에 바로 표시할 수 있다. 트래킹 모드를 설정할 시 지도의 중임이 자동으로 변형되며, 나침반 모드를 사용해 사용자가 바라보는 방향에 맞춰 지도 방향이 회전하도록 만들 수 있어 트래킹 모두와 함께 사용하면 다양한 분야에서 활용이 가능하다.

아이오에스

아이오에스는 지도위에 라인을 표시할 수 있다. 지도 위에 경로 좌표 데이터를 이용해 다양한 형태로 활용할 수 있다. 그리고 커스텀뷰를 지도 위에 올릴 수 있다. 지도 위에 마커를 이용해 특정 장소를 표시할 수 있으며 원하는 이미지로 마커를 생성할 수도 있다. 이 마커와 연동되는 말풍선을 커스텀뷰라고 하는데, 자신이 원하는 스타일로 자유롭게 꾸며 지도 위에 올릴 수 있다. 그리고 안드로이드와 동일하게 현재 위치를 지도 위에 바로 표시할 수도 있으며, 나침반 모드로 사용자가 바라보는 방향으로 회전또한 가능하다.

활용

카카오 지도 API

카카오맵 자바스크립트 API는 키를 발급받아야 사용할 수 있으며, 키를 발급받기 위해서는 카카오 계정이 필요하다. 라이브러리를 사용하기 위해서는 파라메터에 추가해 로드하고 난 뒤, 사용해야 한다. 라이브러리 토큰 부분에 사용하고자하는 이름을 적으면 해당 라이브러리를 불러올 수 있다.

키 발급

카카오 개발자 사이트에 접속해 개발자 등록과 앱을 생성한다. 그리고 자신이 원하는 플랫폼을 추가/등록한다. 이후에 웹과 아이오에스, 안드로이드의 키 등록법과 사용법이 다르다. 안드로이드의 경우 키 해시를 등록하고 페이지 상단의 네이티브 앱 키, 등록한 패키지명, 키 해시를 사용한다. 이 때, 등록된 키 해시와 일치하는 앱에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해야한다.

웹 플랫폼을 추가했을 때는 사이트 도메인을 등록한다. 페이지 상단의 자바스크립트 키를 지도 API의 appkey로 사용한 뒤 앱을 실행한다. 등록한 도메인에서 웹 서버를 실행시켜 아래 파일을 연다.

# 폴더 이동
$ cd /path/to/your/folder/

# 테스트용 서버 실행
$ python -m SimpleHTTPServer 8080

그리고 브라우저를 열어 위 도메인에 접속한다. 등록된 사이트 도메인에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해야한다.

아이오에스에서 카카오 지도 API를 사용할 때는 번들 아이디를 사용한다. 아이오에스 플랫폼을 등록하고 번들 아이디를 등록한 뒤, 페이지 상단의 네이티브 앱 키와 등록한 번들 아이디를 사용한다. 아이오에스 앱의 번들 아이디는 Info.plist 파일의 번들 아이덴티피어 프로퍼티에 설정된다. [[NSBundle mainBundle] bundleIdentifier] 메소드를 이용해서 번들 아이디를 확인할 수 있다. 등록된 번들 아이디와 일치하는 앱에서만 지도 API를 사용할 수 있기 때문에 반드시 등록해줘야한다. 그리고 Info.plist 파일에 다음과 같은 항목으로 앞 단계에서 발급받은 앱 키를 설정한다.

- 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를 추가한다.

코드 구현

맵 뷰를 띄우는 것은 net.daum.mf.map.api.MapView 객체를 생성하여 Activity 의 content-view 에 삽입하면 지도화면을 손쉽게 구현할 수 있다. 맵 뷰의 이벤트를 감지하는 방법은 MapView.MapViewEventListener, MapView.POIItemEventListener, MapView.OpenAPIKeyAuthenticationResultListener 등의 Interface 를 구현해 각 이벤트 발생에 대한 결과를 통보받을 수 있다. 그리고 구현한 인터페이스 객체는 맵뷰 내 설정자 메소드로 등록한다.

지도 중심점, 레벨 변경은 맵뷰 클래스가 제공하는 메소드를 이용하여 손쉽게 지도 중심점과 지도 확대/축소를 변경할 수 있다. 그리고 지도뷰 위에 올라가는 마커를 생성할 수 있는데, 다음 지도에서 제공하는 기본 마커 외 커스텀 마커도 올릴 수 있다. 마커 관련 이벤트는 MapView.POIItemEventListener Interface를 구현함으로써 감지 가능하다. 그리고 지도뷰 위에 폴리라인과 원을 그릴 수 있으며, 리버스 지오코딩을 통해 지도 자표로 주소 정보를 가져올 수 있다.

아이오에스

아이오에스 앱 개발시 카카오 지도 아이오에스 API 를 사용하면 앱 내에 지도를 만들 수 있다. 웹에서 사용하는 자바스크립트 API와는 달리 네이티브 수준에서 동작하기 때문에 아이오에스용 앱과 더욱 긴밀하게 동작이 가능하다.

라이브러리 추가

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 객체에 전달된다.

참고자료

• Kakao Maps API - https://apis.map.kakao.com/

같이 보기

이 지도 API 문서는 솔루션에 관한 토막글입니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 이 문서의 내용을 채워주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션 □■⊕, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 솔루션 CMS • CRM • DRM • ERP • HMS • LCMS • LMS • PMS • SCM • VOC • 그룹웨어 • 모니터링 솔루션 • 솔루션 • 웹빌더 • 위키 • 지식관리시스템(KMS) • 커스터마이징 • 패키지 소프트웨어 • 패키지 제품 프레임워크 넥스코어 • 노드제이에스(node.js) • 닷넷(.NET) • 라프제이(Laf/J) • 레일즈 • 마이바티스(MyBatis) • 맵리듀스 • 스트럿츠 • 스프링 프레임워크 • 아두이노 • 아이바티스(iBatis) • 아파치 스파크 • 애니프레임 • 앵귤러제이에스(Angular.js) • 에이에스피닷넷(ASP.NET) • 인텔리제이 아이디어(IntelliJ IDEA‎) • 장고 • 전자정부 표준 프레임워크 • 하둡 • 하이버네이트 콘텐츠관리시스템 iCS • 드루팔 • 아사프로 • 오픈웍스 • 워드프레스 • 윅스 • 줌라 • 지니웍스 • 콘텐츠와이즈 • 홈스토리 • 홍익인간 홈페이지 솔루션 GPKI • LBS • PKI • 게시판 • 공인인증서 • 구글 애널리틱스 • 구글 애드센스 • 그누보드 • 네이버 애널리틱스 • 넷퍼넬 • 달력 • 대댓글 • 댓글 • 덱스트업로드 • 방명록 • 블로그 • 비즈니스 애널리틱스 • 선플 • 설문조사 • 소셜로그인 • 스킨 • 아이핀 • 악플 • 에이스카운터 • 웹로그 • 위젯 • 익스프레스엔진(제로보드XE) • 인증 • 접속통계 • 제로보드 • 지핀(G-PIN) • 카운터 • 커뮤니티 • 테크노트 • 투표 • 파일업로드 • 회원관리 이메일 솔루션 깨비메일 • 메일플러그 • 썬더메일 • 에어즈락메일 쇼핑몰 솔루션 고도몰 • 굿모닝샵 • 메이크샵 • 카페24 쇼핑몰 • 퍼스트몰 • 후이즈몰 동영상 솔루션 1그램플레이어 • 5K플레이어 • ACG플레이어 • KM플레이어 • VLC미디어플레이어 • 곰플레이어 • 디코더 • 와우자 • 웹엑스 • 인코더 • 코덱 • 코디 • 팟플레이어 검색 솔루션 검색 • 검색엔진 • 독크루저 • 레피아 • 루씬 • 마리너 • 미르서치 • 서치포뮬러원 • 아이트리니티 • 엑스텐 • 엑스퍼서치 • 일래스틱서치 리포팅툴 사이냅 • 알메이트차트 • 오즈리포트 • 유비리포트 • 차트 • 크로닉스리포트(리포트 디자이너) • 클립리포트(렉스퍼트) BI 솔루션 BI • BI매트릭스 • OLAP • 옥타곤 • 코그너스 • 태블로 연계 솔루션 메심 • 비즈위버 • 웹크롤러 • 이크로스 비즈아이 스위트 • 인디고 • 코어브릿지 • 크롤러 • 프로버스 데이터 솔루션 BTL 데이터 인테그레이터 • ETL 솔루션 • 딥솔루션 • 아이샤크 • 이노쿼츠 • 인포매티카 • 탈렌드 • 탈렌드 오픈스튜디오 • 테라스트림 자료공유 솔루션 구글 드라이브 • 나스 • 드롭박스 • 시놀로지 나스 • 원드라이브 • 웹하드 그룹웨어 거래처 관리 • 구글 워크스페이스 • 근태관리 • 노츠 • 노트 • 다우오피스 • 다이렉트 클라우드 • 더존 솔루션 • 메일플러그 • 브레인스톰 • 비즈메카 • 엘지 유플러스 그룹웨어 • 연락처 • 연락처 관리 • 오피스365 • 온타임 • 웍스모바일 • 위하고 • 인사관리 • 일정관리 • 전자결재 • 지스위트 • 지투웍스 • 코디네이터 • 팀포커스 • 하이웍스 • 핸디 • 헬로윈 클라우드 솔루션 오픈네뷸라 • 오픈스택 • 유칼립투스 • 클라우드스택 • 클라우드잇 지도 솔루션 구글 지도 • 네이버 지도 • 바이두 지도 • 지도 • 지도 API • 카카오 지도 • 티맵 모바일 솔루션 모피어스 기타 솔루션 딥오씨알 • 리무트콜 • 스카우터 • 알서포트 위키 : 자동차, 교통, 지역, 산업, 기업, 단체, 업무, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반