[JavaScript] 카카오맵 API 주소 입력하여 좌표 구하기

주소를 입력하여 위도, 경도 좌표를 구하는 기능이다.

테스트를 위하여 카카오 지도 API Key를 발급받아야 한다.

https://apis.map.kakao.com/

 

 

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY&libraries=services"></script>
<input id="address" placeholder="주소 입력"/>
<button id="button">submit</button>
<div>
    <div id="resultAddress"></div>
    <div id="result"></div>
</div>

<script>
    
    function searchAddress() {
        var divAddress = document.getElementById("resultAddress");
        var divResult = document.getElementById("result");
        var addr = document.getElementById("address").value;
        var geocoder = new kakao.maps.services.Geocoder();
        geocoder.addressSearch(addr, function(result, status) {
            console.log(result, status);
            if(status === "OK") {
                var address = result[0].road_address || result[0].address;
                divAddress.innerText = address.address_name;
                divResult.innerText = "위도: " + result[0].y + ", 경도: " + result[0].x;
            } else if(status === "ZERO_RESULT") {
                divAddress.innerText = "";
                divResult.innerText = "검색 결과가 없습니다.";
            }
        });
    }
    document.getElementById("button").addEventListener("click", searchAddress);
    document.getElementById("address").addEventListener("keyup", function(e) {
        if(e.key === "Enter") searchAddress();
    });
</script>