[kakao map api] 예제 실행시켜보기

이전 글에서 visual studio code 설치와 Apache http server 설치에 대해서 알아보았다.

 

길었던 프로그램 설치와 환경설정을 마치고, 이번에야말로 카카오 지도 api를 사용해서 기능을 구현해보는 방법에 대해 알아본다. 카카오 지도 api로 지도를 생성한 다음 컨트롤과 확대/축소, 검색 기능 세 가지 기능을 추가해 볼 것이다.

 

친절하게도 카카오에서는 api 샘플을 제공한다.

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

 

샘플 중에서 우선 지도 생성하기를 클릭하고 Javascript + HTML을 클릭해서 코드를 복사한다.

사진1

 

visual studio code를 실행시킨다음 새로운 파일 하나를 생성 후 저장한다. 저장할 때 파일 이름은 index.html로 만들고, Apache를 설치하면서 만들었던 workspace에 저장해준다. (ctrl + n -> ctrl + s로 빠르게 작업할 수 있고, vs code 실행시키기 귀찮거나 설치를 안했으면 메모장으로 진행해도 상관없다.)

 

현재 구청 컴퓨터가 아니고 본인 컴퓨터에서 작성하고 있어서, 작업환경이 약간 다를 수 있다. 이전 글까지 제대로 따라했다면 신경 쓰지 않아도 된다.

사진2

 

사진 1에서 복사했던 코드를 index.html에 붙여 넣고 발급받은 APP KEY를 사용하세요 부분에 본인의 Javascript 키를 넣는다. 사진 1의 왼쪽 하단 열쇠 아이콘을 클릭하면 개발자 페이지로 바로 이동할 수 있다.

사진3

 

Apache 서버를 실행시킨다. C:/server/Apache24/bin 경로에 있는 ApacheMonitor.exe를 실행시켜서 start를 누르거나 명령 프롬프트로 httpd -k start를 입력하면 된다.

사진4

 

인터넷 창을 열고, 플랫폼에 등록했던 도메인을 입력한다.

사진5

 

지도 크기가 맘에 안 든다. 크기를 창 전체로 변경해준다.

 

<-- 지도를 표시할 div입니다 -->

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

 

코드를 다음과 같이 수정한다.

 

 

<-- 지도를 표시할 div 입니다 -->

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

사진6

 

컨트롤도 올려본다. 샘플 사이트에서 지도에 컨트롤 올리기를 클릭한 다음 코드를 복사한다. 전부 복사할 필요는 없고, 이번에는 Javascript에서 지도에 컨트롤 관련 함수만 가져온다.

사진7

 

index.html에서 지도 생성하기 코드 아래에 붙여 넣고 저장 후 사진 5에서 새로고침 하면 창이 업데이트된다. 오른쪽 상단에 컨트롤이 표시되었는지 확인한다.

사진8

 

검색 기능도 추가해본다. 샘플 사이트에서 키워드로 장소 검색하고 목록으로 표출하기를 클릭한 다음 필요한 코드를 복사한다. 우선 head의 style 부분을 index.html head에 추가한다.

사진9

 

body에서 map_wrap class를 추가할 때 사진 6처럼 height부분을 수정한다. 이때, <--기존의 지도를 표시할 div입니다--> 부분을 제거해줘야 한다. 검색 서비스를 사용하기 위한 libraries=services를 추가하고 그 아래 마커를 담을 배열까지 생성해준다.

사진10

 

컨트롤 생성 코드 아래로 장소 검색 객체를 생성합니다부터 끝까지 복사하면 된다.

사진11

 

검색 기능이 정상적으로 추가되었고, 잘 작동하는지 확인해본다.

사진12

 

키워드 디폴트가 이태원 맛집으로 지정되어 있다. map_wrap class에서 value값을 카카오 판교 오피스로 수정해본다.

사진13

 

지도 중심위치가 이상하게 찍히는 것 같다. 나는 내가 검색한 지점을 중심으로 주변을 보고 싶기 때문에, displayPlaces() 함수를 약간 수정했다.

 

bounds 변수는 사용하지 않으니 제거한다. 상단의 bounds 변수 선언과 반복문의 bounds.extend(), 하단의 map.setBounds() 부분도 주석 처리한다. 그리고 첫 번째 검색 목록의 좌표를 지도 중심 좌표로 설정하는 새로운 코드를 한 줄 추가한다. 좌표를 이동시키는 함수는 샘플에서 지도 이동시키기를 참고하면 된다.

사진14

 

카카오 지도 api 사용해보는 건 여기까지 작성한다. 자세한 샘플 코드 덕분에 엄청 사용하기 편하게 되어 있어서 html을 전혀 모르는 초보자도 조금만 공부하면 재미있는 프로그램을 작성할 수 있을 것 같다.

 

드디어 다음 글이 마지막이다! 다음 글에서는 스크립트 파일을 분리해서 작성하는 법에 대해 작성하려고 한다.