네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제 정보

JavaScript 네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제

본문

네이X지도 api v3

 

네이버는 튜토리얼이나 개발문서가 좀 가독이 불편한 경우가 있는데

(물론 필자의 개발실력이 문제이기도 하지만)

 

그래서 하나 만들었습니다.

 

주소를 좌표로 변환후 지도로 출력하는 함수



<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=개발자ID&submodules=geocoder"></script>
<div id="map" style="width:100%;height:600px;"></div>
<style>
    .iw_inner {padding:10px}
    .iw_inner h3 {font-size: 18px; padding-bottom: 7px}
</style>
<script id="code">
    //function get_pointer (해당주소,대상지도 id,title) {
    function get_pointer (adress,getid,title) {
        naver.maps.Service.geocode({
            address: adress
        }, function(status, response) {
            if (status !== naver.maps.Service.Status.OK) {
                //return alert('Something wrong!');
                console.log('주소에러');
            }
 
            var result = response.result, // 검색 결과의 컨테이너
                items = result.items; // 검색 결과의 배열
 
            // do Something
            var x = eval(items[0].point.x);
            var y = eval(items[0].point.y);
 
            var HOME_PATH = window.HOME_PATH || '.';
 
            var cityhall = new naver.maps.LatLng(y, x),
                map = new naver.maps.Map('map', {
                    center: cityhall.destinationPoint(0, 500),
                    zoom: 10
                }),
                marker = new naver.maps.Marker({
                    map: map,
                    position: cityhall
                });
 
            var contentString = [
                '<div class="iw_inner">',
                '   <h3>'+title+'</h3>',
                '   <p>'+adress+'</p>',
                '</div>'
            ].join('');
 
            var infowindow = new naver.maps.InfoWindow({
                content: contentString
            });
 
            naver.maps.Event.addListener(marker, "click", function(e) {
                if (infowindow.getMap()) {
                    infowindow.close();
                } else {
                    infowindow.open(map, marker);
                }
            });
 
            infowindow.open(map, marker);
        });
    }
 
    /* 마커중복 사용안됨 */
    get_pointer('대전 중구','map','대전본점');
</script>

 

소스상에서 api키만 변경해주시고 사용하시면 됩니다

 

 get_pointer('대전 중구','map','대전본점');

함수로 호출하시고 인자값은 순서대로 검색주소 반환할 div id값 마커에 표시할 이름 입니다.

 

추천
2

댓글 5개

네이X api가 좀 불친절 합니다.
저같은 초짜 프로그래머는 알기 힘들게 만들어놔서 ㅡ.ㅜ
살짝 정리해본겁니다.
전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT