Map SDK for Web준비하기
KT Map SDK for Web은 API KEY를 발급받아야 사용할 수 있습니다
KEY를 발급받기 위해서는 KT API 사이트 계정이 필요합니다.
키 발급 방법1. KT API 사이트 (https://apilink.kt.co.kr/) 접속
2. 계정 가입 및 로그인
3. 권한신청 메뉴로 이동
4. API 신청 > 일반개발자 | 개인사업자 | 법인사업자 | GiGA Genie 제휴법인 중 해당 소속 선택
5. 정보입력 후 권한 신청지원
브라우저지도 및 서비스 라이브러리는 Google Chrome(64+), Mozilla Firefox(60+), Safari(11+) 및 Edge(41+)와 같은 대부분의 최신 브라우저를 지원합니다. 브라우저 버전 및 사용 하드웨어에 따라 지원되지 않는 기능이 있을 수 있습니다. 모든 기능을 지원하기 위해 최신 버전의 브라우저 사용을 권장합니다.
타입스크립트Map SDK for Web에서는 모든 라이브러리에 대해 JavaScript와 TypeScript를 지원하고 있습니다.
라이브러리 및 APIMap과 관련된 라이브러리 및 API를 모두 제공하고 있습니다.
[ ktGms 패키지 ] 지도와 관련된 기능을 사용할 수 있습니다.
[ POI(Point Of Interest) API ] 검색 기능을 사용할 수 있습니다. 카페 같은 키워드를 검색하면 해당 키워드에 알맞는 장소를 받을 수 있습니다.
[ Address Search API ] 장소 검색 기능을 사용할 수 있습니다. KT우면연구센터 같은 건물명/지명을 검색하면 해당 건물에 대한 주소를 받을 수 있습니다.
[ Reverse Geocoding API ] 주소 검색 기능을 사용할 수 있습니다. 지도 좌표(위도/경도)를 검색하면 해당 좌표에 해당하는 주소 정보(법정동, 행정동, 지번주소, 도로명주소)를 받을 수 있습니다.
[ Route API ] 길찾기 기능을 사용할 수 있습니다. 출발지, 도착지, 경유지를 검색하면 최적 경로, 최단시간 경로, 최단거리 경로, 통행료 무료 경로에 대한 정보를 받을 수 있습니다.
[ Analyze Tool(분석 도구) 라이브러리 ] 시각화 등을 통하여 분석할 수 있는 기능을 사용할 수 있습니다.NPM 설치
NPM을 사용하여 ktGms(KT Map) 패키지를 설치할 수 있습니다. Vanilla JavaScript/TypeScript, React, Nextjs, Vue 등 NPM 명령어로 생성할 수 있는 프로젝트에서 모두 설치하여 사용할 수 있습니다.
CDN 추가
패키지를 설치하고 싶지 않은 경우, CDN(Content Delivery Network)의 웹 페이지에 필요한 파일을 포함할 수 있습니다.
NPM으로 설치한 모듈로 JavaScript/TypeScript에서 지도 띄우기
간단한 코드를 통해 웹브라우저에 지도를 띄울 수 있습니다. Vanilla JavaScript/TypeScript로 프로젝트를 만들었다면 아래와 같이 진행하여 기본 지도를 띄울 수 있습니다.
➡ 전체 코드 및 실행화면 확인하기➡ Map API Document 확인하기
NPM으로 설치한 모듈로 React에서 지도 띄우기
React로 프로젝트를 만들었다면 아래와 같이 진행하여 기본 지도를 띄울 수 있습니다.
라이브러리를 설치하고 싶지 않은 경우, CDN(Content Delivery Network)을 사용할 수 있으며, NPM 설치 후 과정과 비슷합니다. import 대신 script 코드 추가로 변경하여 사용할 수 있습니다.
지도 기능에 기본 지도 이외에 Control, Marker, InfoWindow, Layer, Style 등 많은 기능이 있습니다. 더 자세한 사항은 example 코드와 API Document를 통해 확인해주세요.
- Example : 다양한 예시 코드를 확인할 수 있고, 예시 코드를 웹 내에서 직접 수정하고 실행할 수 있습니다.
- API Document : 지도 라이브러리의 Class와 Option에 대한 설명입니다.
KT Map SDK for Web은 API KEY를 발급받아야 사용할 수 있습니다
KEY를 발급받기 위해서는 KT API 사이트 계정이 필요합니다.
키 발급 방법1. KT API 사이트 (https://apilink.kt.co.kr/) 접속
2. 계정 가입 및 로그인
3. 권한신청 메뉴로 이동
4. API 신청 > 일반개발자 | 개인사업자 | 법인사업자 | GiGA Genie 제휴법인 중 해당 소속 선택
5. 정보입력 후 권한 신청지원
브라우저지도 및 서비스 라이브러리는 Google Chrome(64+), Mozilla Firefox(60+), Safari(11+) 및 Edge(41+)와 같은 대부분의 최신 브라우저를 지원합니다. 브라우저 버전 및 사용 하드웨어에 따라 지원되지 않는 기능이 있을 수 있습니다. 모든 기능을 지원하기 위해 최신 버전의 브라우저 사용을 권장합니다.
타입스크립트Map SDK for Web에서는 모든 라이브러리에 대해 JavaScript와 TypeScript를 지원하고 있습니다.
라이브러리 및 APIMap과 관련된 라이브러리 및 API를 모두 제공하고 있습니다.
[ ktGms 패키지 ] 지도와 관련된 기능을 사용할 수 있습니다.
[ POI(Point Of Interest) API ] 검색 기능을 사용할 수 있습니다. 카페 같은 키워드를 검색하면 해당 키워드에 알맞는 장소를 받을 수 있습니다.
[ Address Search API ] 장소 검색 기능을 사용할 수 있습니다. KT우면연구센터 같은 건물명/지명을 검색하면 해당 건물에 대한 주소를 받을 수 있습니다.
[ Reverse Geocoding API ] 주소 검색 기능을 사용할 수 있습니다. 지도 좌표(위도/경도)를 검색하면 해당 좌표에 해당하는 주소 정보(법정동, 행정동, 지번주소, 도로명주소)를 받을 수 있습니다.
[ Route API ] 길찾기 기능을 사용할 수 있습니다. 출발지, 도착지, 경유지를 검색하면 최적 경로, 최단시간 경로, 최단거리 경로, 통행료 무료 경로에 대한 정보를 받을 수 있습니다.
[ Analyze Tool(분석 도구) 라이브러리 ] 시각화 등을 통하여 분석할 수 있는 기능을 사용할 수 있습니다.NPM 설치
NPM을 사용하여 ktGms(KT Map) 패키지를 설치할 수 있습니다. Vanilla JavaScript/TypeScript, React, Nextjs, Vue 등 NPM 명령어로 생성할 수 있는 프로젝트에서 모두 설치하여 사용할 수 있습니다.
CDN 추가
패키지를 설치하고 싶지 않은 경우, CDN(Content Delivery Network)의 웹 페이지에 필요한 파일을 포함할 수 있습니다.
NPM으로 설치한 모듈로 JavaScript/TypeScript에서 지도 띄우기
간단한 코드를 통해 웹브라우저에 지도를 띄울 수 있습니다. Vanilla JavaScript/TypeScript로 프로젝트를 만들었다면 아래와 같이 진행하여 기본 지도를 띄울 수 있습니다.
지도를 담을 DOM 영역 생성하기
html 파일을 만들고, 파일 안에 아래와 같은 코드를 작성합니다. id가 map인 div 태그 사이에 지도를 담을 수 있습니다.
지도 띄우기
js 또는 ts 파일을 만들어 지도 띄우는 코드를 작성합니다.
우선, NPM으로 설치했던 지도 모듈을 import 합니다.
이후, 지도 띄우는 코드를 작성합니다.
html 파일에서 선언한 DOM 영역의 id와 js/ts에서 선언한 Map의 container가 일치하면 DOM에 지도를 띄울 수 있습니다.
html 파일을 만들고, 파일 안에 아래와 같은 코드를 작성합니다. id가 map인 div 태그 사이에 지도를 담을 수 있습니다.
지도 띄우기
js 또는 ts 파일을 만들어 지도 띄우는 코드를 작성합니다.
우선, NPM으로 설치했던 지도 모듈을 import 합니다.
이후, 지도 띄우는 코드를 작성합니다.
html 파일에서 선언한 DOM 영역의 id와 js/ts에서 선언한 Map의 container가 일치하면 DOM에 지도를 띄울 수 있습니다.
➡ 전체 코드 및 실행화면 확인하기➡ Map API Document 확인하기
NPM으로 설치한 모듈로 React에서 지도 띄우기
React로 프로젝트를 만들었다면 아래와 같이 진행하여 기본 지도를 띄울 수 있습니다.
지도 관련 모듈과 스타일 불러오기
jsx/tsx 파일을 만들고, NPM으로 설치했던 지도 모듈을 import 합니다.
지도를 담을 DOM 영역 생성하기
html을 return하는 부분에 지도를 담을 수 있도록 아래와 같은 코드를 작성합니다.
지도 띄우기
useRef로 지도 DOM 요소와 연결합니다.
useRef로 지도를 담을 상태를 생성하고, useEffect로 페이지가 렌더링 되면 지도를 띄우는 코드를 작성합니다.
전체 코드는 아래와 같습니다.
CDN으로 JavaScript/TypeScript에서 지도 띄우기jsx/tsx 파일을 만들고, NPM으로 설치했던 지도 모듈을 import 합니다.
지도를 담을 DOM 영역 생성하기
html을 return하는 부분에 지도를 담을 수 있도록 아래와 같은 코드를 작성합니다.
지도 띄우기
useRef로 지도 DOM 요소와 연결합니다.
useRef로 지도를 담을 상태를 생성하고, useEffect로 페이지가 렌더링 되면 지도를 띄우는 코드를 작성합니다.
전체 코드는 아래와 같습니다.
라이브러리를 설치하고 싶지 않은 경우, CDN(Content Delivery Network)을 사용할 수 있으며, NPM 설치 후 과정과 비슷합니다. import 대신 script 코드 추가로 변경하여 사용할 수 있습니다.
[ index.html ] 지도를 담을 DOM 영역 생성하기
html 파일을 만들고, 파일 안에 아래와 같은 코드를 작성합니다. CDN을 추가하여 웹페이지에 필요한 파일을 포함합니다. id가 map인 div 태그 사이에 지도를 담을 수 있습니다.
[ index.js ] 지도 띄우기
js 또는 ts 파일을 만들어 지도 띄우는 코드를 작성합니다.
html 파일에서 선언한 DOM 영역의 id와 js/ts에서 선언한 Map의 container가 일치하면 DOM에 지도를 띄울 수 있습니다.
추가 기능html 파일을 만들고, 파일 안에 아래와 같은 코드를 작성합니다. CDN을 추가하여 웹페이지에 필요한 파일을 포함합니다. id가 map인 div 태그 사이에 지도를 담을 수 있습니다.
[ index.js ] 지도 띄우기
js 또는 ts 파일을 만들어 지도 띄우는 코드를 작성합니다.
html 파일에서 선언한 DOM 영역의 id와 js/ts에서 선언한 Map의 container가 일치하면 DOM에 지도를 띄울 수 있습니다.
지도 기능에 기본 지도 이외에 Control, Marker, InfoWindow, Layer, Style 등 많은 기능이 있습니다. 더 자세한 사항은 example 코드와 API Document를 통해 확인해주세요.
- Example : 다양한 예시 코드를 확인할 수 있고, 예시 코드를 웹 내에서 직접 수정하고 실행할 수 있습니다.
- API Document : 지도 라이브러리의 Class와 Option에 대한 설명입니다.