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: "";
                                }
                            
                        

                            
const parser= new DOMParser();

async function initMap() {
    let map

    const position= { lat: 35.815024, lng: 129.216929 } // 남간길 사거리
    const zoom= 15 // 줌 설정

    /* 맵 라이브러리 불러오기 */
    const { Map, InfoWindow, 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 { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    // 선 배열 정의
    const pathlines= [
        // { lat: 35.824978, lng: 129.224602 }, // 상서장(주차공간)
        // { lat: 35.822087, lng: 129.219304 }, // 도당터널(&식물원)
        { lat: 35.821000, lng: 129.221889 }, // 올렛길 입구 -> 올렛길 등산로 
        { lat: 35.820220, lng: 129.218276 }, // 정자 -> 올렛길로 가는 좁은 길 
        { lat: 35.819775, lng: 129.218135 }, // 식혜골 마을회관 좁은 삼거리 -> 정자 
        { lat: 35.819609, lng: 129.218770 }, // 김호장군 고택
        // { lat: 35.819659, lng: 129.216974 }, // 식혜골길 사거리 -> 김호장군 고택 
        // { lat: 35.816592, lng: 129.217072 }, // 남간안길  
        { lat: 35.815024, lng: 129.216929 }, // 남간길 사거리
        { lat: 35.813786, lng: 129.217043 }, // 남간사지 당간지주 -> 해목령 등산로 
        { lat: 35.810895, lng: 129.213322 }, // 농로(시멘트) -> 창림사지
        { lat: 35.807016, lng: 129.213040 }, // 포석정지(방문자센터 & 포석정주차장) -> 남산순환도로 
    ];

    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,
    };

    /* 마커 설정하기 */
    const priceTag= document.createElement('div')
    priceTag.className= 'price-tag'
    priceTag.textContent= "남간길 사거리"


    const marker= new AdvancedMarkerElement({
        map: map, position: position,
        content: priceTag,
        gmpClickable: true, // 마커 클릭 가능
    });

    const tourStops= [
        { position: { lat: 35.819609, lng: 129.218770 }, title: "김호장군 고택" },
        { position: { lat: 35.8138050, lng: 129.2215962 }, title: "일성왕릉" },
        { position: { lat: 35.815836, lng: 129.218495 }, title: "남간사지 석정" }, 
        { position: { lat: 35.8163961, lng: 129.2142954 }, title: "육부전" }, 
        { position: { lat: 35.8156726, lng: 129.2161859 }, title: "월암재" }, 
        { position: { lat: 35.8159449, lng: 129.2126095 }, title: "나정" }, 
        { position: { lat: 35.810557, lng: 129.216017 }, title: "창림사지 삼층석탑" },
        { position: { lat: 35.813786, lng: 129.217043 }, title: "남간사지 당간지주" }, 
    ];

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

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

    // 마커 만들기
    tourStops.forEach(({ position, title }, i) => {
        const pin= new PinElement({
            glyph: `${i + 1}`,
        });

        const marker= new AdvancedMarkerElement({
            position, map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });

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

        // Add a click listener for each marker, and set up the info window.
        // marker.addListener('click', ({ domEvent, latLng }) => {
        //     const { target } = domEvent;
        //     infoWindow.close();
        //     infoWindow.setContent(marker.title);
        //     infoWindow.open(marker.map, marker);
        // });
    });
}

initMap();