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

네이X지도 api v3

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

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

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

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

[code]

<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>

[/code]

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

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

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