html, body { height: 100%; margin: 0 auto; padding: 0; }
                                #map { height: 100%; }

                                .price-tag {
                                    position: relative;
                                    padding: 10px 15px; background-color: #4285F4; border-radius: 8px; color: #FFFFFF; font-size: 14px;
                                    transform: translateY(-8px);
                                }

                                .price-tag::after {
                                    position: absolute; left: 50%; top: 100%; width: 0; height: 0;
                                    border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #4285F4;
                                    transform: translate(-50%, 0);
                                    content: "";
                                }
                            
                        

                            
                                async function initMap() {
                                    let map

                                    const position= { lat: 35.796113, lng: 129.208842 } // 지도 중심 위치 설정
                                    const zoom= 15 // 줌 설정

                                    /* 맵 라이브러리 불러오기 */
                                    const { Map, RenderingType } = await google.maps.importLibrary("maps");

                                    /* 맵 생성하기 */
                                    map= new Map(document.getElementById("map_3rmt"), {
                                        center: position, zoom: zoom, mapId: "7fdaaff1e26cf5f3",
                                        renderingType: RenderingType.VECTOR, // 벡터 지도 사용하기
                                        gestureHandling: "greedy", // 모든 터치 및 스크롤 허용하기
                                    });

                                    const pathlines= [
                                        { lat: 35.796113, lng: 129.208842 }, // 삼릉 & 경애왕릉(버스) -> 등산로
                                        { lat: 35.794192, lng: 129.208749 }, // 입곡 석불두 
                                        { lat: 35.788923, lng: 129.205047 }, // 신라월성대군단소(버스) -> 약수골, 금오봉
                                        { lat: 35.783032, lng: 129.204747 }, // 비파골(버스) -> 비파골
                                        { lat: 35.776368, lng: 129.205248 }, // 용장(용장주차장 & 버스) -> 용장골, 고위봉, 열반재
                                        { lat: 35.760161, lng: 129.205932 }, // 틈수골(버스) -> 천룡사지, 고위봉
                                        { lat: 35.752660, lng: 129.208336 }, // 용산서원
                                        { lat: 35.754816, lng: 129.235500 }, // 새갓골(주차장) -> 등산로
                                        { lat: 35.7614991, lng: 129.2372437 }, // 열암곡 마애불상 -> 바람재 갈림길
                                        // { lat: 35.765828, lng: 129.226594 }, // 백운암 -> 천룡사지 | 고위봉
                                    ];

                                    const flightPath= new google.maps.Polyline({ // 연결된 직선 생성하기
                                        path: pathlines, // 선 배열을 가져온다
                                        geodesic: true, // 선이 지구의 곡선을 따르도록 한다
                                        strokeColor: "#FF0000", // 선 색상 ← 16진수 html 색상
                                        strokeOpacity: 1, // 선의 불투명도 ← 0.0 ~ 1.0
                                        strokeWeight: 3, // 선의 두께 ← 픽셀
                                        editable: true // 사용자가 드래그할 수 있도록 한다
                                    });

                                    flightPath.setMap(map)

                                    // Google Maps JavaScript API에서 제공하는 미리 정의된 화살표 기호 사용
                                    const lineSymbol= {
                                        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                                    };

                                    // 폴리선을 만들고 'icons' 속성을 통해 기호를 추가한다
                                    const line= new google.maps.Polyline({
                                        path: [
                                            { lat: 35.754816, lng: 129.235500 }, // 선의 시작 지점
                                            { lat: 35.765828, lng: 129.226594 }, // 선의 끝 지점
                                        ],

                                        icons: [
                                            {
                                                icon: lineSymbol, // 기호
                                                offset: "100%" // 선의 길이
                                            },
                                        ],

                                        map: map
                                    });

                                    /* 마커 라이브러리 불러오기 */
                                    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

                                    const priceTag= document.createElement('div')
                                    priceTag.className= 'price-tag'
                                    priceTag.textContent= "남산 삼릉"

                                    /* 마커 설정하기 */
                                    const marker= new AdvancedMarkerElement({
                                        map: map, position: position, title: "더 많은 정보가 필요하면 클릭하세요..",
                                        content: priceTag,
                                    });

                                    /* 정보창 작성하기 */
                                    const infowindow= new google.maps.InfoWindow({
                                        content: "Kjc: 아직은.. 기다리세요. 삼릉 가는길, 등반 안내도, 갤러리 페이지(나중에 채웁니다 ㅡㅡ;)",
                                        ariaLabel: "삼릉마트" // 표시할 컨텐츠와 지정된 위치를 인수로 전달한다
                                    });

                                    /* 정보창 열기 이벤트 */
                                    marker.addListener("click", () => {
                                        infowindow.open({
                                            anchor: marker, map // 앵커 포인트와 맵을 인수로 전달한다
                                        });
                                    });
                                }

                                initMap();