1. 카카오 지도 api 사용해서 웹에 적용하기(초보자용)

1. 카카오 지도 api 사용해서 웹에 적용하기(초보자용)

 

http://apis.map.kakao.com/web/

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성(카카오 아이디로 등록하면 간편히 이용할 수 있습니다)
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록

4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)

5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.

6. 사용하는 에디터를 열고 지도를 삽입하려는 HTML을 실행합니다.

7. 지도를 삽입하고 싶은 위치에 다음과 같이 HTML을 작성합니다.

<div id="map"></div>
//인라인 스타일 또는 외부 스타일 등으로 map의 크기를 지정합니다.
//ex) style="width:500px; height:400px;"
//ex) #map {width:500px; height:400px;}

8. HTML 태그 하단에 5번에서 복사한 key를 이용 스크립트를 작성합니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

9. 8번 스크립트 아래로 <script></script> 태그를 생성하여 내부에 아래와 같이 작성합니다.

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

10. FTP를 이용하여 4번에서 등록한 사이트에 해당 HTML을 업로드하고 URL를 통해 확인합니다.

ex) http://도메인/maps.html

 

* 적용 시 아래와 같은 결과를 볼 수 있습니다. (반드시 도메인주소로 확인해야합니다.)

 

 

 

그 외 많은 정보 참고(카카오로 이동됩니다.)

http://apis.map.kakao.com/web/sample/