지도 #

지도 JavaScript API를 사용하면 웹 페이지 및 휴대 기기에 표시할 수 있도록 자신만의 콘텐츠 및 이미지로 지도를 맞춤 설정할 수 있다. Maps JavaScript API에는 레이어, 스타일, 컨트롤 및 이벤트, 다양한 서비스 및 라이브러리를 사용하여 수정할 수 있는 네 가지 기본지도 유형 (로드맵, 위성, 하이브리드 및 지형)이 있다.

Installing #

지도 API를 사용하려면 모든 API 요청과 함께 API 키를 포함해야 하며 각 프로젝트에서 결제하도록 설정해야 한다. Google 지도 플랫폼 SKU에 대해 각 결제 계정에 매월 200달러의 Google 지도 플랫폼 크레딧을 사용할 수 있으며 해당 SKU에 자동으로 적용된다. 비용은 다음과 같이 계산된다.

 SKU 사용 x 사용마다 가격.

인증키 받기

https://developers.google.com/maps/documentation/maps-static/get-api-key?hl=ko

개발자 모드로 개발할 시

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

인증키를 받았을 시

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=인증키=false"></script>

marker cluster 사용 시

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

네이버 지도 API 사용 #

네이버 지도 API종류는 크게 WEB에서 사용할 수 있는 Web Dynamic Map, Mobile에서 적용할 수 있는 Moble Dynamic Map, Rest API를 활용하여 이미지로 지도를 반환하는 Static Map이 있다. API는 무료로 제공하지만 Web Dynamic Map은 1천만건, Static은 3백만건, Mobile은 무제한이나 1억건 이상 사용 시 고객센터로 별도 문의가 필요하다.

installing #

네이버 클라우드 플랫폼에 회원가입을 한 후 결제수단을 등록하고 콘솔창에 접속한다. (유료 상품을 이용하기 전까지는 요금이 청구되지 않음)
콘솔창에 AI-Application Service 목록에 AI-NAVER API를 클릭 후 애플리케이션 등록을 클릭 한다.
Maps에서 사용하고자 하는 API를 선택한다. 선택 후 생성할 도메인(URL)과 애플리케이션 이름을 입력한다.

Clind ID를 복사하여 소스코드에 적용한다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=[Client ID 적용]"></script>

NAVER 지도 API가 로드되는 동안 나머지 웹 사이트를 랜더링하는 비동기 방식으로 사용하려면 다음과 같이 callback 파라미터를 이용해 callback 하무 지정
```
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID&callback=CALLBACK_FUNCTION"></script>
```

지도를 삽입할 DOM 요소 지정

<div id="map" style="width:100%;height:400px;"></div>

지도 옵션 설정 및 지도 생성

var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
}
var map = new naver.maps.Map('map', mapOptions);

카카오 지도 API 사용 #

카카오 지도 API는 무료로 제공되고 있다. 사용하기 위해서 카카오 개발자사이트에 가입하여 APP KEY를 받아 사용하는 방식이다. 또한 다양한 기능과 데이터를 제공하여 장소 검색, 경로 탐색, 주변 시설물 정보 등 다양한 지리적 데이터와 기능을 제공한다. 카카오 지도 API는 모바일에 최적화되어있다.

Installing #

카카오 개발자사이트 (https://developers.kakao.com) 접속
개발자 등록 및 앱 생성
웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록 (예: http://localhost:8080)
페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용
앱을 실행

지도를 담을 영역 만들기

<div id="map" style="width:500px;height:400px;"></div>

실제 지도를 그리는 JavaScript API 불러오기
```
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
//APP KEY는 JavaScript의 앱 키를 사용하면된다.
```
API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 한다.

지도를 띄우는 코드 작성

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
    level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

결과

이렇게 화면이 뜬다면 기본적으로 지도를 띄우는 데 성공한 것이다.

이보다 더 다양한 옵션들이 많으니 Kakao map 홈페이지를 참고하여 더 많은 기능을 구현할 수 있다.

지도 API 활용 #

주변 고객 알림 서비스 #

개인적으로 자신이 관리하는 고객들이 있다고 가정
그리고 그 고객들의 주소를 이용하여 지도에 위치를 찍는다.
사용자는 이동 시 마다 자신의 근처 5km 내에 고객의 정보를 알림으로 받고 싶다고 가정

일단 위 내용들에 세부적으로 설정하려면 여러 가지 지식과 노력이 필요하다. 하지만 그것을 간단하게 하려면 포털에서 제공되는 API를 활용하면 수고가 적어진다.

API를 이용 주소 -> 좌표 변환 (위도, 경도 )

일단은 지도에서 사용되는 모든 정보는 위도, 경도를 사용
그러기 때문에 고객의 주소를 좌표로 전환 해야 하는 작업은 필수

좌표를 이용하여 지도 표시

좌표를 얻었다면 고객의 정보를 지도에 그려야 함
좌표가 있다면 그렇게 어려운 작업은 아님

좌표를 이용하여 고객의 거래 측정

네이버나 구글 지도에서 보면 해당 기능과 비슷한 자 기능 존재
좌표 간의 거리를 계산해서 알림이 되거나 표시가 되도록 설정
이 부분에는 오픈된 소스가 많이 있으므로 꼭 API를 사용 안 해도 되고, 무료 사용할 수 있는 쿼리 수가 한정되어 있기오서 쿼리의 수를 줄일 수 있는 부분

Tmap #

운송업을 하는 운전자는 운행 관제시스템이 필수이다. 그리고 그 운송 관제용 단말기 대부분이 SK 네트워크 것을 사용되고 있다. 이 관제 시스템의 데이터를 이용한 것이 바로 "Tmap"이다.

관제 데이터를 이용하여 지도상의 평균 이동 시간을 산출 등의 자료로 이용되고 있으며 해당 누적 데이터를 이용하여 타임머신 기능(요일별 통계를 하여 해당 길의 평균 이동 시간을 계산) 등에 활용되고 있다.

위와 같이 지도 API를 이용한 서비스는 무궁무진하며 접목할 수 있는 데이터도 무궁무진하다.

지도 #

Structured data

Table of Contents

지도 API가 제공되는 포탈 #

구글 #

네이버 #

카카오 #

지도 API 사용 #

구글 MAP API 사용 #

Installing #

네이버 지도 API 사용 #

installing #

카카오 지도 API 사용 #

Installing #

지도 API 활용 #

주변 고객 알림 서비스 #

Tmap #

참고 사이트 #

Incoming Links #

Related Articles (Article 0) #