[JavaScript] 카카오 지도/로컬 API 사용하기

※ 해당 작성글은 광전 IT에서 주최한 코드마스터 선발대회 참여를 위해 제작한 "오늘 뭐먹지?" 프로젝트에서 활용한 API 사용법입니다.

>> 프로젝트 바로가기

---

카카오 지도/로컬 API는 장소 검색을 지원하는 오픈 API로 지도를 띄우고 좌표와 주소의 변환이나 좌표를 기준으로 주변에 있는 업체에 대한 검색 등을 지원합니다.

"오늘 뭐먹지?" 프로젝트는 날씨에 따라 맞춤 식당을 추천해주는 사이트로
지도와 현재 위치 주변에 있는 식당에 대한 데이터,
좌표 <-> 주소 변환 기능 등을 필요로합니다.

---

1. 필요한 API 준비

해당 프로젝트에서 필요한 카카오 API의 기능은 크게 네가지입니다.

1. 맵 띄우기
2. 마커 띄우기
3. 주소로 좌표 검색하기
4. 카테고리로 장소 검색하기

맵과 마커를 등록하거나 좌표로 주소를 검색하려면 라이브러리를 불러와야합니다.

>> Kakao Maps API
카카오 공식 문서를 참고하여 라이브러리를 불러옵니다.

services와 clusterer, drawing 라이브러리 불러오기

<!--HTML-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=###########&libraries=services,clusterer,drawing"></script>

---

2. map 객체 사용

해당 라이브러리의 객체를 사용할 수 있게 되었습니다.

>> Sample - 지도 생성하기
다시 공식 문서를 참고하여 객체를 사용하는 법을 찾아봅시다.

변경하고자 하는 부분을 변수로 바꾸고 function으로 만들어 사용합니다.

※ function으로 만들어 사용하면 필요할때 재사용이 가능해집니다. 재사용이 필요없는 경우 function으로 감싸지 않고 바로 사용할 수 있습니다.

지도 생성하기

// JS
function mapCreate(id, lv, num) {
    var mapContainer = document.getElementById(id), // 지도를 표시할 div 
        mapOption = {
        center: new kakao.maps.LatLng(latlon.y, latlon.x), // 지도의 중심좌표
        level: lv // 지도의 확대 레벨
    };
	// 지도를 생성합니다    
	map[num] = new kakao.maps.Map(mapContainer, mapOption);
}

---

3. 마커 사용

>> Sample - 다른 이미지로 마커 생성하기
마커 역시 공식문서를 참고합니다.

프로젝트 컨셉에 맞는 이미지를 제작하여 imageSrc와 사이즈등을 변경해주고 function화하여 작성합니다.

※ 식당이 검색되거나 지도를 클릭하여 검색할 때 마다 마커가 변경되야합니다. marker변수를 따로 선언하여 해당 변수에 객체를 다시 저장하는 형식으로 기존 마커를 제거하고 새로운 마커를 등록합니다.

마커 생성하기

// JS
var imageSrc = 'imges/maker.png', // 마커이미지의 주소입니다    
	imageSize = new kakao.maps.Size(70, 70), // 마커이미지의 크기입니다
	imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
var marker = [];  // main지도 마커, 주소창 마커

function makerCreate(num) {
	marker[num] = new kakao.maps.Marker({
		map: map[num],
		position: new kakao.maps.LatLng(latlon.y, latlon.x),
		image: new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)
	});
}

---

4. 주소 -> 좌표 변환

map과 마커를 표시하려면 위도와 경도값이 필요합니다.
사용자에게 위도와 경도를 입력받을 수는 없으니 주소를 좌표로 변환하는 작업이 필요합니다.

>> Sample - 주소로 장소 표시하기
공식 문서를 확인하여 입력값과 응답값을 확인하여 용도에 맞게 변경합니다.

주소로 장소 표시하기

// JS
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
function reco(recoNum){
	// 주소로 좌표를 검색합니다
	geocoder.addressSearch(arr_address_name[recoNum], function (result, status) {
        // 정상적으로 검색이 완료됐으면 
        if (status === kakao.maps.services.Status.OK) {
			// 결과값으로 받은 위치를 마커로 표시합니다
			displayMarker(result[0], 0);
        }
	}
}

위는 프로젝트에서 작성한 코드의 일부입니다.

1. 공식 문서에 나와있는 코드를 function화 하고
2. 주소 입력부분을 매개변수에 따라 변화하는 변수로 변경합니다.
3. 응답데이터를 확인하고 알맞게 사용합니다.

---

5. 카테고리로 장소 검색

설정된 좌표를 기준으로 반경내의 업체들 중 식당만을 검색해야합니다.

>> Kakao developers - 로컬 - REST API

해당 기능은 라이브러리가 아닌 rest api로 데이터를 얻을 수 있습니다.
rest api를 사용하면 요청 파라미터와 api key등을 담아 url로 요청하여 응답데이터를 얻을 수 있습니다.

API를 이용해 특정 카테고리로 장소에 대한 데이터 얻기

// JS
var arr_address_name = [];  // 주소
$.ajax({
	method: "GET",
    url: "https://dapi.kakao.com/v2/local/search/category.json?category\_group\_code=FD6&page=" + j + "&x=" + latlon.x + "&y=" + latlon.y + "&radius=" + rad + "",
    headers: { Authorization: "KEY" },  // 카카오 developers에서 발급받은 API key를 입력해주세요.
    async: false // ajax 2개 이상 사용시 필요
})
.done(function (msg) {
	for (var i = 0; i < msg.documents.length; i++) {
    	arr_address_name.push(msg.documents[i].address_name); // 주소에 값 추가
    }
}

위는 프로젝트에서 작성한 코드 일부입니다.
위의 로컬 > rest api 공식 문서를 참고하여 url에 쿼리 파라미터를 담아 ajax로 실행하여 응답데이터를 받아 사용합니다.