Daum map API, 클러스터링과 인포윈도우 생성하기

현재 프로젝트에서 위치 좌표를 기반으로 마커를 생성할 일이 있어서 다음 지도 API를 사용하고 있습니다.

클러스터링을 사용하면 위치 정보를 시각적인 효과를 높여서 제공할 수 있는데요, 아래는 적용을 완료한 그림입니다.

< 관련 레퍼런스 >

인포 윈도우 생성하기 : http://apis.map.daum.net/web/sample/basicInfoWindow/ 

마커에 클릭 이벤트 등록 :http://apis.map.daum.net/web/sample/addMarkerClickEvent/ 

클러스터에 클릭 이벤트 등록 : http://apis.map.daum.net/web/sample/addClustererClickEvent/ 

클러스터 생성 : http://apis.map.daum.net/web/sample/basicClusterer/

1) API키를 등록하여 Javascript APP KEY를 발급 받습니다. (키는 총 4개 나옵니다, 그 중 자바스크립트 키를 사용하시면 됩니다)

그리고 라이브러리를 제공받을 링크를 걸어둡니다.

<script type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR APP KEY&libraries=services,clusterer,drawing"></script>
 

2) HTML에 map이 그려질 영역을 정의합니다.

 <div id="map" style="width: 100%; height: 400px;"></div>

3) 자바스크립트 코드를 작성합니다.

    //지도를 초기화 시키는 함수
    function initMap(){
     
         var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
                        center : new daum.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표 
                        level : 14 // 지도의 확대 레벨 
                    });
                    
                    // 마커 클러스터러를 생성합니다 
                    var clusterer = new daum.maps.MarkerClusterer({
                        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
                        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
                        minLevel: 10 // 클러스터 할 최소 지도 레벨 
                    });
                    
                
                    //Ajax를 통해 좌표 데이터 map를 전송받는다.
                
                $.ajax({
                    
                    url : "데이터를 요청할 URL (to server...)",
                    type : "GET",
                    data : "",
                    dataType : "json",
                    success : function(data){
                        //요청에 성공하면 DB에서 꺼낸 데이터를 json 형식으로 응답 받는다.
                                
                        //마커들을 저장할 변수
                               var markers = $(data).map(function(i, position) {
                                   //마커를 하나 새로 만드는데, 위치값을 지정하고 클릭이 가능하게 설정함.
                                   var marker = new daum.maps.Marker({
                                        position : new daum.maps.LatLng(position.LAT, position.LNG),
                                        clickable : true
                                    });
                                   
                                   //띄울 인포윈도우 정의
                                  var iwContent = '<div style="padding:5px;">'
                                   +position.NAME+'<br/>'
                                   +position.ADDRESS+
                                   '</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
                                    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
 
                                    // 인포윈도우를 생성합니다
                                    var infowindow = new daum.maps.InfoWindow({
                                        content : iwContent,
                                        removable : iwRemoveable
                                    });
                                   
                                    // 마커에 클릭이벤트를 등록합니다
                                    daum.maps.event.addListener(marker, 'click', function() {
                                          // 마커 위에 인포윈도우를 표시합니다
                                     
                                          infowindow.open(map, marker);      
                                    });
                                   
                                    //생성된 마커를 반환합니다.
                                   return marker;
                            });
                    
                
                               
                               // 마커 클러스터러에 클릭이벤트를 등록합니다
                                // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
                                // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
                                daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
 
                                    // 현재 지도 레벨에서 1레벨 확대한 레벨
                                    var level = map.getLevel()-1;
 
                                    // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
                                    map.setLevel(level, {anchor: cluster.getCenter()});
                                });
                            
                               //클러스터에 마커들을 저장합니다.
                clusterer.addMarkers(markers);
 
                        
                    },
                    error : function(xhr, status, error){
                        //요청에 실패하면 에러코드 출력  
                        alert("에러코드 : " + xhr.status);
                    }
                    
                    
                    
                });
 
        }

전송되는 json 형식은 Map 형태로 key는 LNG, LAT, ADDRESS, NAME 이 있습니다. LAN, LAT는 String 형태의 좌표값이고 나머지는 주소와 박물관 이름입니다.

[{"LNG":"126.974884","ADDRESS":"서울특별시 종로구 청운동 효자로 12","ID":"1234","LAT":"37.576693","NAME":"국립고궁박물관"},
{"LNG":"126.980470","ADDRESS":"서울특별시 용산구 서빙고로 137(용산동6가 168-6)","ID":"2567","LAT":"37.523987","NAME":"국립중앙박물관"},
{"LNG":"129.227830","ADDRESS":"경상북도 경주시 월성동 일정로 186","ID":"7890","LAT":"35.830423","NAME":"국립경주박물관"}]

4) 각자 서버에 따라 데이터를 꺼내오는 로직을 작성합니다. 저 같은 경우는 스프링을 사용하였기 때문에 아래와 같은 컨트롤러에 매핑해 주었습니다.

@RequestMapping(value="/getGeoLocation", method= {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public List<Map<String, String>> getGeoLocation() {
        
        List<Map<String, String>>container = new ArrayList<>();
        container = museumService.getGeoLocation();
        
        return container;
    }

이상 설명을 마치겠습니다.

다음 API 문서에 상당히 설명히 친절하게 되어있기 때문에 참고 하시면 많은 도움이 될 것이라고 예상합니다.

질문 있으시면 남겨주세요~~!