js :: Daum Kakao 주소 API 이용하기 (웹 개발 회원가입)

다음 카카오 주소 API

주소 api를 사용하기 위해서 kakao developer에서 API 키 값을 받아야 한다. (링크 https://developers.kakao.com/) 가입 및 로그인을 하고 나서 애플리케이션을 생성하면 API 키값을 발급해준다. js를 이용해서 하기 때문에 js API 키값을 이용하면 된다. 여기서 주의 할점은 발급 받은 KEY값은 다른사람에게 절대 알려주거나 노출해서는 안된다. 일단은 여기까지가 첫번째 단계이다.

애플리케이션을 생성

 

프로젝트 이름을 넣거나 자신이 원하는 이름으로 넣기

 

발급받은 키 확인하기

 

 

가이드 참조

다음 주소 API 가이드를 보면 쉽게 따라 할 수 있다. (링크 http://postcode.map.daum.net/guide) 본 글에서는 아래 사진에 있는 주소를 입력하면 밑에 지도까지 나오는 서비스를 이용하려 한다.

 

가이드에는 예제코드를 통해 사용방법을 친절히 알려주고 있다. 여기서 우리가 수정해야할 부분은 API 키값을 넣어주는것이다. 디자인 같은 경우도 자신의 취향에 맞게 수정하면 된다.

 

예제 코드

<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>

<script src="http://dmaps.daum.net/map_js_init/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 fullAddr = data.address; // 최종 주소 변수
                var extraAddr = ''; // 조합형 주소 변수

                // 기본 주소가 도로명 타입일때 조합한다.
                if(data.addressType === 'R'){
                    //법정동명이 있을 경우 추가한다.
                    if(data.bname !== ''){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있을 경우 추가한다.
                    if(data.buildingName !== ''){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                    fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
                }

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = fullAddr;
                // 주소로 상세 정보를 검색
                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>​

 

지도 서비스를 이용하여 만들어본 서비스