구글 맵을 이용해서 마커를 찍을 경우가 있는데 이게 여러 개의 마커를 사용할 때가 있습니다.

그런데 여러개의 마커를 사용하게 되면 지도를 zoomout  을 많이 했을 때 엄청나게 많은 마커들이 집중되서 지저분해 보이게 됩니다.

그래서 만들어진 것이 cluster 입니다.

이 것은 여러개의 마커들이 어느 정도 범위안에 속하면 마커를 합치고 합친 갯수를 보여주게 됩니다.

이런 식으로 합쳐 나오게 됩니다.

UI 가 상당히 정리 된거죠.

사용법은 간단합니다.

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/

이 곳에서 파일을 다운로드 하시면 되는데 어떤 걸 써야할 지 모른다면,

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0.2/src/

여기에서 markerclusterer.js를 받으신 후 (markerclusterer_compiled.js는 압축된 파일입니다.) 서버에 올리고 아래와 같이 코딩합니다.

헤더에 스크립트를 불러옵니다.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.exp&region=KR"></script>
<script type="text/javascript" src="markerclusterer_compiled.js"></script>

 외부 데이터를 json으로 가져오는 방법은 여러가지가 있으니까 쓰시는 방식으로 가져오시구요.

var markers = []; // 요렇게 일단 다중 마커를 담을 변수를 만들어요.

for (var i = 0; i < 1000; ++i) {
//반복문으로 외부 데이터를 기반으로 마커를 생성해줍니다.
var latLng = new google.maps.LatLng(data.photos[i].latitude,
     data.photos[i].longitude);
var marker = new google.maps.Marker({
            position: latLng,
            draggable: true,
            icon: markerImage
          });
     markers.push(marker); //마커들을 markers 배열안에 넣습니다.
}

일단 위처럼 다중 마커를 찍습니다.

중요한 것은 markers라는 변수안에 배열로 각 마커들을 넣고 있는 것입니다.

var markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: 16,
          gridSize: 50,
          styles: styles
});

이렇게 코드를 작성 해주시면 바로 cluster가 잡히게 됩니다.

Grid Size가 합칠 범위입니다. 이러한 옵션은 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html#ClusterIconStyle 이 곳에 있는 API를 참고하시면 됩니다.

styles를 이용해서 마커의 이미지도 변경이 가능하고 합산 표시하는 내용의 텍스트도 꾸밀 수 있습니다.

적절하게 꾸며 놓으면 아래 예시처럼 만들 수 있습니다.

추가로 클러스터를 이벤트로 더욱 디테일하게 사용하고자 한다면 https://googlemaps.github.io/js-marker-clusterer/docs/reference.html 문서를 참고해주세요.