경주 남산, 삼릉 가는길

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();