카카오 지도 API

<input type="text" name="memberPost" placeholder="우편번호">

<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>

<input type="text" name="memberAddr1" placeholder="주소"><br>

<input type="text" name="memberAddr2" placeholder="상세주소">

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<script>

    function sample6_execDaumPostcode() {

        new daum.Postcode({

            oncomplete: function (data) {

                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.

                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.

                var addr = ''; // 주소 변수

                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.

                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우

                    addr = data.roadAddress;

                } else { // 사용자가 지번 주소를 선택했을 경우(J)

                    addr = data.jibunAddress;

                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.

                document.querySelector("[name=memberPost]").value = data.zonecode;

                document.querySelector("[name=memberAddr1]").value = addr;

                // 커서를 상세주소 필드로 이동한다.

                document.querySelector("[name=memberAddr2]").focus();

            }

        }).open();

    }

</script>