0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터는 웹사이트 개발 과정 중 오시는 길 페이지 - 카카오 지도 연동하기를 이야기합니다.

<오시는 길 페이지 - 카카오 지도 연동하기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.

1

퍼블리싱 내용 중 이미지 부분을 주석 처리합니다.

2

카카오 지도 API 라이브러리를 호출합니다.

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={발급받은-API-KEY}&libraries=services"></script>

3

지도에 위치를 나타내기 위해서는 위도와 경도 좌표가 필요합니다. 원칙상으로는 카카오 rest api 를 호출해서 구할 수 있기는 한데, 번거로우니까 웹에 있는 툴을 사용해 보겠습니다.
https://tablog.neocities.org/keywordposition_m 에 접속하고 주소를 검색합니다. 이후 지도를 클릭해 보면 아래에 위도와 경도가 나옵니다.

4

위도와 경도를 구했으니 카카오 지도 API 를 호출해서 실제 지도를 그려 봅니다. /static/js/location.js 파일을 만들고 경도와 위도를 입력합니다.

5

카카오 지도 API 라이브러리 호출 코드 하단에 location.js 를 포함시키고 해당 함수를 호출합니다.

<script type="text/javascript" src="/static/js/location.js"></script>
<script>Data.LoadMap();</script>

이제 확대 축소 잘 되는 걸 확인할 수 있습니다.

개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.