Markerclusterer 라이브러리를 Maps JavaScript API와 함께 사용하면
가까이 있는 마커를 클러스터로 결합하고 지도상에 마커를 간단하게 표시할 수 있다!
html, body { height: 100%; margin: 0 auto; padding: 0; }
#map { height: 100%; }
async function initMap() {
let map;
// const position= { lat: 35.815836, lng: 129.218495 }; // 지도 위치 설정
// const zoom= 15 // 줌 설정
/* 맵 라이브러리 불러오기 */
const { Map, RenderingType, InfoWindow } = await google.maps.importLibrary("maps");
/* 맵 생성하기 */
map= new Map(document.getElementById("map_3rmt"), {
center: { lat: 35.815836, lng: 129.218495 }, zoom: 15, mapId: "7fdaaff1e26cf5f3",
renderingType: RenderingType.VECTOR, // 벡터 지도 사용하기
gestureHandling: "greedy", // 모든 터치 및 스크롤 허용하기
});
/* 마커 라이브러리 불러오기 */
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const pin= new PinElement({ scale: 1.5 }); // 핀 크기 설정
const pinBackground= new PinElement({ background: '#FBBC04' }); // 핀 배경색
const pinBorder= new PinElement({ borderColor: '#137333' }); // 핀 테두리색
const pinGlyph= new PinElement({ glyphColor: 'white' }); // 글리프 색상
const labels= "0123456789";
const markers= locations.map((position, i) => {
const label= labels[i % labels.length];
const pinGlyph= new google.maps.marker.PinElement({
glyph: label, glyphColor: "white", background: "red", borderColor: "white",
// backGround: pinBackground, borderColor: pinBorder,
});
/* 마커 설정하기 */
const marker= new AdvancedMarkerElement({
map: map, position: position, title: "더 많은 정보가 필요하면 클릭하세요..",
content: pin.element,
content: pinGlyph.element,
// content: pinBackground.element,
// content: pinBorder.element,
});
/* 정보창 작성하기 */
const infowindow= new google.maps.InfoWindow({
content: "",
// ariaLabel: "삼릉마트", // 표시할 컨텐츠와 지정된 위치를 인수로 전달한다
disableAutoPan: true,
});
/* 정보창 열기 이벤트 */
marker.addListener("click", () => {
infoWindow.setContent(position.lat + ", " + position.lng);
infowindow.open({ anchor: marker, map}) // 앵커 포인트와 맵을 인수로 전달한다
});
return marker;
});
// 마커 클러스터 추가하기
new MarkerClusterer({ markers, map });
}
const locations= [ // 마커클러스터 배열 정의
{ lat: 35.822087, lng: 129.219304 }, // 도당터널(&식물원) -> 올렛길 등산로
{ lat: 35.819609, lng: 129.218770 }, // 김호장군 고택 -> 올렛길 등산로
{ lat: 35.815968, lng: 129.212632 }, // 나정
{ lat: 35.815836, lng: 129.218495 }, // 남간사지 석정 -> 일성왕릉 -> 해목령
{ lat: 35.813786, lng: 129.217043 }, // 남간사지 당간지주 -> 해목령 등산로
{ lat: 35.810557, lng: 129.216017 }, // 창림사지 삼층석탑
{ lat: 35.807016, lng: 129.213040 }, // 포석정지(방문자센터 & 포석정주차장) -> 남산순환도로
{ lat: 35.804390, lng: 129.211435 }, // 지마왕릉(태진지 저수지) -> 삼층석탑
{ lat: 35.801901, lng: 129.211222 }, // 삼불사 석조여래삼존입상(주차공간 & 버스) -> 등산로
{ lat: 35.796113, lng: 129.208842 }, // 삼릉 & 경애왕릉(버스) -> 등산로
]
initMap();