다음 주소 API(daum postcode) 레이어 형식으로 띄우기

LINK

다음 주소 API

 

// 값을 받아올 form
<form name="addr_info">
  <input type="text" name="zipcode" readonly>
  <input type="text" name="addr" readonly>
  <a href="javascript:void(0)" onclick="show_layer()">검색</a>
</form>

// 주소 API를 띄울 div
<div id="postLayer"></div>


// script
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function show_layer(){
  var frm = document.addr_info;
  var postLayer = document.getElementById("postLayer");
  
  new daum.Postcode({
        oncomplete:function(data){ // 주소 선택을 완료했을 때
          /*
          * 주소 선택 시 API는 zonecode, address를 return
          */
          frm.zipcode.value=data.zonecode;
          frm.addr.value=data.address;
        },
        onclose:function(state){
          if(state === "COMPLETE_CLOSE"){ // 주소 선택으로 인한 close일 경우
            postLayer.innerHTML = ''; // 레이어 적용 해제
          }
        },
        width:'100%',
  }).embed(postLayer); // 생성해둔 div에 layer를 적용
}
</script>