[Javascript]카카오 지도, 주소api 사용해보기
최근 진행중인 사이드 프로젝트에서 당근마켓에서처럼 특정 범위 이내에서만 정보를 출력해주는 기능이 필요해졌다. 그래서 찾던 중 다음(현 카카오)api중에 주소 api가 있는 것을 발견했다. 코드만 가져다가 붙이면 바로 작동 할 수 있도록 잘 작성되어 있어서 바로 테스트를 해보았다.
다음 주소api예제 코드 테스트
test용 html을 선언한 후 코드를 붙여봤다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
</body>
</html>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 사용하세요&libraries=services"></script>
카카오맵을 사용해야 하기 때문에 스크립트 영역에 카카오 개발자 센터에서 발급받은 API 키를 입력해준다.
API키는 애플리케이션을 등록한 후 발급받을 수 있다.
카카오맵에서는 javascript 키를 사용한다. 위 코드 스크립트 태그 중에 "발급받은 API KEY를 사용하세요" 라고 써있는 곳에 키를 넣어주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
</body>
</html>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 사용하세요&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
//지도를 미리 생성
var map = new daum.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
//마커를 미리 생성
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.537187, 127.005476),
map: map
});
function sample5_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample5_address").value = addr;
// 주소로 상세 정보를 검색
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
}
});
}
}).open();
}
</script>
최종적으로 테스트 코드는 이렇게 되는데 API키만 적절한 곳에 잘 끼워넣었다면 바로 실행시켜볼 수 있다. 라이브서버로 실행시켜 보면 다음과 같이 출력된다.
주소는 잘 검색이 되지만 내가 가져온 코드는 주소에 해당하는 맵까지 함께 출력해주는 코드였다. 주소를 입력하고 나면 맵이 보여야 하는데 되지 않는다.
개발자도구를 열어보았더니 아니나 다를까 에러가 떠있다.
에러메시지를 읽어보니 Unauthorized라고 써있는 것을 알 수 있다. 요청은 했으나 인증받지 않는 사용자라서 응답을 받지 못한 것이다. API키를 잘 입력했는데 왜 실행이 안될까 했는데 카카오 개발자 API를 사용하기 위해서는 도메인을 등록해놔야지 응답을 받을 수 있다.
내 애플리케이션 > 앱설정 > 플랫폼으로 들어가면 사이트 도메인을 추가할 수 있다.
현재 내 도메인은 http://localhost:5500 이다. 5500을 추가해보자. 도메인을 추가해주자 에러메시지가 사라진 것을 볼 수 있다. 아래와 같이 메시지가 나온다면 정상적으로 작동하는 것이다.
주소를 선택하자 지도가 잘 출력되는 것을 볼 수 있다. 지도 api는 좌표를 기반으로 하는데 그 중에서도 위도와 경도를 사용한다. 위도와 경도를 얻어오는 방법을 알아낸다면 두 지점간의 거리도 구할 수 있을 것이다. 다음에는 이어서 주소 api로 얻어온 지역의 위도와 경도를 가지고 두 지점간의 거리를 측정하는 방법을 알아볼 것이다.