[Daum API] 다음 Map & Local API 응용

다음DNA에서 제공하는 지도 API와 Local API의 간단한 응용입니다.
원하는 지명을 입력하면 리스트를 보여주고, 리스트에서 원하는 지명을 선택하면 원하는 곳으로 마커와 위치를 이동 시키는 예제입니다.

코드에서는 DEMO_KEY를 사용했는데 실제 사용할 때는 이 DEMO_KEY는 등록한 홈페이지 주소가 다르다고 사용이 안될 것입니다.
개발을 하고자 하시는 분은 apikey 발급을 받으신 후에 코드를 약간 수정하는 것으로 이용하실 수 있습니다.

<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY" charset="utf-8"></script>

<script language="Javascript" type="text/javascript">
    var daumLocalSearch = {
        /** 초기화. **/
        init : function(){
            this.apikey = "DAUM_LOCAL_DEMO_APIKEY"
            this.q = document.getElementById('daumLocalSearch');
            this.v = document.getElementById('daumLocalView');
            this.s = document.getElementById('daumLocalScript');
        },
        /** 검색 **/
        search : function(){
            this.query = '?apikey=' + this.apikey + '&output=json&q=' + encodeURI(this.q.value);
            
            //검색어에 맞게 각각 첫페이지를 띄움.
            this.pingSearch(1);
        },
        /** callback 함수 호출. **/
        pingSearch : function(ds, api, pgno, callback, result){
            this.s.innerHTML = "";
            
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.charset = 'utf-8';
            s.src = 'http://apis.daum.net/local/geo/addr2coord' + this.query +  '&callback=daumLocalSearch.pongSearch&result=50'; 
            
            this.s.appendChild(s);
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            this.v.innerHTML ="";
            var ul = document.createElement('ul');
            
            for(var i=0; i<z.channel.item.length; i++){
                var li = document.createElement('li');
                var a = document.createElement('a');
           
               a.href = 'javascript:daumMap.searchMark(' + z.channel.item[i].point_y + ',' + z.channel.item[i].point_x + ')';
               a.innerHTML = daumLocalSearch.escapeHtml(z.channel.item[i].title)
            
                li.appendChild(a);
                ul.appendChild(li);
            }

            this.v.appendChild(ul);
        },
        
        /** HTML태그 안 먹게 하는 함수 **/
        escapeHtml: function (str) {
            str = str.replace(/&amp;/g, "&");
            str = str.replace(/&lt;/g, "<");
            str = str.replace(/&gt;/g, ">");
            return str;
        }
    };

    /** 다음 Map **/
    var daumMap = { 
        init : function(lat,lng){
            this.map =  new daum.maps.Map(document.getElementById('daumMapView'), {
                center: new daum.maps.LatLng(lat,lng),
                level:4
            });
            this.zoomControl = new daum.maps.ZoomControl();    
            this.map.addControl(this.zoomControl, daum.maps.ControlPosition.RIGHT);    
            this.mapTypeControl = new daum.maps.MapTypeControl();    
            this.map.addControl(this.mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
            this.marker = new daum.maps.Marker({position: new daum.maps.LatLng(lat, lng)});
            this.marker.setMap(this.map);
        },
        searchMark : function(lat,lng){
            var po = new daum.maps.LatLng(lat, lng);
            this.map.panTo(po);
            this.marker.setPosition(new daum.maps.LatLng(lat,lng));
        }
    }

    window.onload = function () {
        daumMap.init(37.566419230900905,126.97787415510291);
        daumLocalSearch.init();
        daumLocalSearch.search();
    };
</script>

<div id="daumLocalForm">
    <input id="daumLocalSearch" type="text" value="서울" onkeydown="javascript:if(event.keyCode == 13) daumLocalSearch.search();"/>
    <input id="daumLocalSubmit" type="submit" value="검색" 
        onclick="javascript:daumLocalSearch.search()"/>
</div >

<div id="daumLocalView" style="float:left; overflow-x:hidden; overflow-y:scroll; width:300px; height:480px; padding:10px;"></div>
<div id="daumMapView" style="width:500px;height:500px;"></div>
<div id="daumLocalScript"></div>