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.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 }, // 삼릉 & 경애왕릉(버스) -> 등산로
                                    ];

                                    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)

                                    /* 마커 라이브러리 불러오기 */
                                    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();