2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
구글 맵 – 일정 범위 다중 마커 합산한 Cluster(클러스터) 기능

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

그런데 여러개의 마커를 사용하게 되면 지도를 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는 압축된 파일입니다.) 서버에 올리고 아래와 같이 코딩합니다.

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

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

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

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

이렇게 코드를 작성 해주시면 바로 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 문서를 참고해주세요.

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.