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.813786, lng: 129.217043 } // 남간사지 당간지주
    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 { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

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

    // 제목이 있는 기본 표식 ← PinElement 필요하지 않음
    const markerViewWithText= new AdvancedMarkerElement({
        map,
        position: { lat: 35.821000, lng: 129.221889 }, 
        title: '올렛길 입구 -> 올렛길 등산로',
    });

    // 마커 크기 변경
    const pinScaled= new PinElement({ scale: 1.5 });
    const markerViewScaled= new AdvancedMarkerElement({
        map,
        position: { lat: 35.819609, lng: 129.218770 },
        title: '김호장군 고택 -> 올렛길 입구',
        content: pinScaled.element,
    });

    // 마커 배경색
    const pinBackground= new PinElement({ background: '#FBBC04' });
    const markerViewBackground = new AdvancedMarkerElement({
        map,
        position: { lat: 35.813786, lng: 129.217043 },
        title: '남간사지 당간지주 -> 해목령 등산로',
        content: pinBackground.element,
    });

    // 마커 테두리색
    const pinBorder= new PinElement({ borderColor: '#137333' });
    const markerViewBorder= new AdvancedMarkerElement({
        map,
        position: { lat: 35.8138050, lng: 129.2215962 },
        title: '일성왕릉 -> 등산로',
        content: pinBorder.element,
    });

    // 글리프 색상
    const pinGlyph= new PinElement({ glyphColor: 'white' });
    const markerViewGlyph= new AdvancedMarkerElement({
        map,
        position: { lat: 35.810557, lng: 129.216017 },
        title: '창림사지 삼층석탑',
        content: pinGlyph.element,
    });

    const pinTextGlyph= new PinElement({ glyph: 'T', glyphColor: 'white' });
    const markerViewGlyphText= new AdvancedMarkerElement({
        map,
        position: { lat: 35.815968, lng: 129.212632 },
        title: '나정',
        content: pinTextGlyph.element,
    });

    /* 마커 설정하기 */
    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();