[javascript/jquery] 카카오 주소 검색 embed 예제

[javascript/jquery] 카카오 주소 검색 embed 예제

 

made by Gemini

 

안녕하세요!

 

본업으로 돌아와서

 

아카이빙할겸 매번 검색 하지 않게 저장용으로

 

카카오 주소검색 api 를 이용하는 방법을 공유하려고 합니다!

 

팝업으로 구현할 수도 있고, 특정 div 영역안에 검색창을 구현할 수도 있는데요!

 

그중에서 특정 div 영역안에 embed 형식으로 구현한 예제를 공유하려고 합니다!

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?= KAKAO_KEY ?>&libraries=services"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

 

 

위처럼 우선 관련 스크립트를 구현하려고 하는 페이지 상단에 로드 시킵니다!

 

위 내용 중에서 KAKAO_KEY 로 되어 있는 부분은

 

카카오 개발자 센터에서 어플리케이션을 생성하면 나오는 javascrip 키를 넣으시면 됩니다!

 

아래 함수는 주소 검색을 구현하고자 하는 버튼에 이벤트를 걸어서 호출되도록 하시면 됩니다!

 

function open_addr_modal() {
	...
    new daum.Postcode({
        oncomplete: function(data) {
            var geocoder = new kakao.maps.services.Geocoder();

            geocoder.addressSearch(data.address, function(result, status) {
                if (status === kakao.maps.services.Status.OK) {
                    $("#id_data_lat").val(result[0].x);
                    $("#id_data_lon").val(result[0].y);
                }
            });

            $("#id_data_addr").val(data.address);
            $("#id_data_post_code").val(data.zonecode);
            $("#id_data_addr_detail").focus();
        }
    }).embed("div 의 아이디");
}

 

 

위 함수를 보시면 아시겠지만,

 

주소검색 후 클릭시 oncomplete 가 호출되고,

 

geocoder 는 좌표를 추가로 저장해야될때 해당 x,y 좌표값을 받아오는 부분이라 놔뒀습니다!

 

그리고 그 아래보시면,

 

data 객체안에 address 는 주소, zonecode 는 우편번호를 받게되고

 

상세 주소를 보통 추가로 입력받아야 하기 때문에 상세주소 input 의 아이디에 focus 를 주어 이동시키는 소스 입니다!

 

각자의 개발 환경과 마크업에 맞게 변경해서 사용하시면 될듯 합니다!

 

개발에 참고하세요!

 

도움이 되셨다면, 구독/공감/댓글 부탁드립니다!

 

감사합니다!