[개인프로젝트] 5일차 - 카카오 주소 api를 사용해서 네이버 map api 표현하기

카카오 주소 api , 네이버 map api 기능 적용

 

프로젝트 기능중 하나인 가게등록 기능에서, 가게 주소를 카카오 주소 api로 입력하면

해당 주소가 네이버 지도로 표시될수있도록 해주었다.

 

- 카카오 주소검색 api 태그

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

 

먼저,네이버 지도 api에 받아올 주소값을 입력하기위해 카카오 주소검색 api를 사용하여 주소검색을 넣어준다.

 

<script>
function execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function (data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if (data.userSelectedType === 'R') {
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if (data.buildingName !== '' && data.apartment === 'Y') {
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if (extraAddr !== '') {
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    // document.getElementById("extraAddress").value = extraAddr;

                } else {
                    document.getElementById("extraAddress").value = '';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('postcode').value = data.zonecode;
                document.getElementById("address").value = addr;

                // 커서를 상세주소 필드로 이동한다.
                // document.getElementById("detailAddress").focus();
            },
            onclose: function () {
                showOnMap(); // 팝업이 닫힌 후에 지도를 표시하는 함수 호출
            }

        }).open();

    }

    // 주소 및 우편번호 유효성 검사 함수
    function validateAddress() {
        var address = $("#address").val();
        // var detailAddress = $("#detailAddress").val();
        var postcode = $("#postcode").val();

        // 주소, 상세주소, 우편번호가 모두 입력되었는지 확인
        if (address.length > 0 && postcode.length > 0) {
            $("#addressValidationMessage").text(""); // 유효성 검사 메시지 초기화
            $("#addressValidationMessage").attr("class", "correct");
            return true; // 유효성 검사 통과
        } else {
            $("#addressValidationMessage").text("주소와 상세주소, 우편번호를 모두 입력해주세요.");
            $("#addressValidationMessage").attr("class", "incorrect");
            return false; // 유효성 검사 실패
        }
    }

    // 주소 및 우편번호 입력란 값이 변경될 때 메시지 초기화
    $("#address, #postcode").blur(function () {
        validateAddress();
    });
</script>

 

 

< 구현화면 >

 

우편번호 찾기 버튼을 클릭하여 주소를 입력하면 밑의 <input>요소에 주소값이 입력된다.

이제, 해당 input태그에 입력된 값을 바탕으로 네이버 map api를 통해 지도를 출력해야한다.

 

네이버 Map api 구현

 

 

https://www.ncloud.com/?language=ko-KR

NAVER CLOUD PLATFORM

 

네이버 클라우드 플랫폼 사이트에서 Map API 사용을 위해 사용신청을 한뒤, Client-id값을 받아와 <script>태그를 적어줘야한다.

위의 스크립트 코드는 네이버 개발가이드를 참고해서 그대로 적으면 된다.

 

문제 - naver.maps.Service.geocode 실행 에러

 

 

 <input id="address">에 입력된 주소값을 바탕으로 네이버 지도를 생성해야하는데,

해당 코드가 실행되지않았다.

클라이언트의 개발자도구상에 

 

Uncaught TypeError: Cannot read properties of undefined (reading 'geocode') 라는 에러가 발생되어,

여기저기 인터넷에 찾아보았지만 해결할수없어 

차근차근 개발자 가이드를 읽으며 실행흐름을 따라가보았는데,

해답은 정말 간단한 실수였다.

 

위의 코드에 

naver.maps.Service.geocode {(~ 를 통해서

input에 입력된 주소값이 예를들어 '서울시 강남구 역삼동'이라면,

해당 주소를 네이버 지도에 표시할수있도록 위도와 경도 형태로 바꾸어 주는 메소드인데,

해당 기능을 사용하려면 Geocoding이라는 서브모듈을 추가해줘야한다.

맨처음 api를 신청할때 Web Dynamic Map만 신청하고 해당 모듈을 추가하지않았기때문에 

당연히 해당 기능이 수행되지않았던 것이다.

 

 

Geocode 사용을 위해 서브모듈 추가하기

 

네이버 클라우드 플랫폼에서 Geocoding 도 추가해준다.

 

 

 

기존에 네이버 Map api의 기본 스크립트 코드에서 Client-id 입력후 &submodules=geocoder 를 통해 geocoder를 사용할것이라고 명시해주면

 

 

다음처럼 잘 작동한다!