#1 준비하기
1) 카카오 개발자 사이트(https://developers.kakao.com) 접속
2) 개발자 등록 및 로그인을 한 후,
3) 메뉴 아이콘을 누르고 Maps API를 선택합니다.
4) Web을 선택한 후, 시작하기를 선택하면 Web API 가이드 페이지로 이동합니다.
5) 왼쪽 아래에 있는 키 발급을 선택한 후, 애플리케이션 추가하기 버튼을 눌러 정보를 작성합니다.
6) 애플리케이션을 선택 후 왼쪽의 플랫폼 탭으로 이동.
아래쪽에 위치한 Web 사이트 도메인을 등록합니다. (*여기에서 등록한 사이트에서만 API가 작동합니다)
이후 요약정보 탭 또는 앱 키 탭에서 확인할 수 있는 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
#2 웹페이지에 적용하기
한글로 작성되어있는 가이드 페이지를 읽어보면 매우 쉽게 이해할 수 있습니다.
스크롤을 조금만 내려보면 각 코드들의 역할과 함께 전체 코드를 볼 수 있습니다.
이 코드를 그대로 이용하여 사용하면 되는데, 개인별로 수정해줘야 할 부분은 다음과 같습니다.
1) 발급받은 APP KEY 적용.
발급받은 APP KEY를 넣으시면 됩니다. 를 지우고 (점 포함) 부분에 위에서 확인했던 [JavaScript 키]를 넣어줍니다.
2) 지도 사이즈 조절
임베디드 방식으로 적용된 width와 height 값을 원하는 수치로 변경해 줍니다.
3) 중심 좌표 조절
자바 스크립트에서 LatLng(33.450701, 126.570667)라고 표시된 부분이 중심 좌표가 됩니다.
이 부분을 원하는 위치로 옴겨줘야 하는데, 이 위도와 경도 수치는 구글 맵으로 원하는 위치를 지정한 후 주소창에 나타나는 수치로 확인할 수 있습니다.
* 주소 부근에 다음과 같이 나타나는데 d35.8688088!4d128.5978056
d 다음에 적혀있는 (빨간색으로 표시된) 부분만 사용하면 됩니다.
#3 그 외
샘플 페이지를 통해 다양한 사용 방법을 확인할 수 있으며, 해당 샘플을 클릭하면 친절하게도 javascript 코드와 주석까지 깔끔하게 달려있어 사용하기 매우 편리합니다.
주의할 점은 각 기능들은 지도를 생성하는 다음 코드 밑으로 적어야 한다는 것 정도?
var map = new kakao.maps.Map(mapContainer, mapOption);
또한 위자드 탭을 통해 지도 Web API의 주요 기능에 대한 코드를 자동으로 생성하여 쉽게 적용할 수 있게 도와주는 페이지도 있습니다.
