다음 주소 API

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

다음 주소 API는 사용방법이 간단하다!

 

HTML

다음 주소 API를 사용하기 위해 스크립트를 연결해준다.

<div class="form-group">
    <label for="title">주소</label> <input type="button" onclick="sample5_execDaumPostcode()" id="mapBtn" value="주소 검색"><br>
    <input type="text" id="address" name="address"  placeholder="주소" onclick="clickBtn()" class="width100p mb-15"><br>
    <input type="text" id="address2" name="address2"  placeholder="상세주소" class="width100p"><br>
    <div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
    <input type="hidden" id="lon" placeholder="경도" name="lon" value="" class="width100p">
    <input type="hidden" id="lat" placeholder="위도" name="lat" value="" class="width100p">
</div>

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

 

js

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("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();
}

// 주소를 text로 그냥 입력을 할려고하면 주소검색 버튼이 눌러져서 검색창에서 찾을 수있도록 한다.
function clickBtn(){
  document.getElementById("mapBtn").click();
}