다음 카카오 api 사용 방법 - 페이지에 지도 구현하기
웹을 공부하다보면 지도기능을 자주 사용하는 편입니다. 위치 정보를 제공하는데 지도가 가장 직관적이라 생각하기 때문입니다.
그 중 다음 카카오의 지도를 자주 활용하는데 구현 부터 간단한 사용방법까지 설명할 예정입니다.
시작하겠습니다.
1. 지도 api를 사용하기 위해 카카오 개발자 사이트에서 key를 발급 받습니다.
- 카카오 개발 사이트에 접속합니다.(https://developers.kakao.com/)
계정이 있다면 로그인을 하고, 없으면 회원가입을 해줍니다.
- key를 생성해 줍니다.
- 앱 만들기를 눌러줍니다.
- 이름과 회사명은 임의로 적어주셔도 됩니다.
- 완료하면 key 화면이 나오는데 저희는 JavaScript를 사용할 예정이므로 해당 키를 따로 복사해 놓습니다.
꼭 복사해 두세요!!
2. 다음 지도 api 사이트에 접속합니다. (http://apis.map.daum.net/)
저희는 웹에서 구현할 예정이므로 웹을 선택해 줍니다.
선택하면 목록이 많이 뜨는걸 볼 수 있습니다. 해당 api에 대한 설명, 샘플, 사용설명서 같은 목록이 있는데 그중 샘플을 클릭해 줍니다.
많은 것들이 나오지만 저희는 지도부터 띄우는게 목적이므로 지도 생성하기를 눌러줍니다.
JavaScript 소스 코드를 제공하는데 다음과 같이 적으면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>지도 생성하기</title> </head> <body> <!-- 지도를 표시할 div 입니다 --> <div id="map" style="width:100%;height:350px;"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; // 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다 var map = new daum.maps.Map(mapContainer, mapOption); </script> </body> </html> | cs |
appkey에 위에서 발급했던 키값을 적어주면 끝!
완성!
'공부' 카테고리의 다른 글
| (Python) 임의의 키워드 매개변수 사용하기 (0) | 2019.03.19 |
|---|---|
| (Python) 매개변수를 임의의 숫자만큼 전달하기 (0) | 2019.03.19 |
| docker 이미지 저장 방법 (0) | 2019.03.13 |
| 안드로이드- R오류 (0) | 2019.03.09 |
| 블로그의 소스 코드를 좀 더 이쁘게 만들어보자(color script) (0) | 2019.03.07 |
