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

                            
let map, infoWindow;

async function initMap() {
    // let map;

    const position= { lat: 35.79809, lng: 129.20654 }; // 지도 위치 설정

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

    /* 맵 생성하기 */
    map= new Map(document.getElementById("map_3rmt"), {
        center: position, // 지도 위치 설정
        zoom: 19, // 줌 설정
        // mapId: "7fdaaff1e26cf5f3", // 테스트용일 때는 "DEMO_MAP_ID"를 사용하면 된다! 레스터 지도 ID: ac4ed9966c13d8211495382b
        // gestureHandling: "greedy", // 모든 터치 및 스크롤 허용
        // renderingType: RenderingType.VECTOR // 벡터 지도 사용하기
    });

    // map.setMapTypeId("roadmap") // 지도유형 동적 설정(기본값: roadmap)

    /* 마커 라이브러리 불러오기 */
    const { AdvancedMarkerView, 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 marker= new AdvancedMarkerView({
        map: map, position: position,
        title: "더 많은 정보가 필요하면 클릭하세요..", // 타이틀 설정
        content: pin.element,
        content: pinBackground.element,
        content: pinBorder.element,
        content: pinGlyph.element,
    });

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

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

    const locationButton= document.createElement("button")

    locationButton.textContent= "Pan to Current Location"
    locationButton.classList.add("custom-map-control-button")
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
                const pos= { lat: position.coords.latitude, lng: position.coords.longitude, }

                infoWindow.setPosition(pos)
                infoWindow.setContent("Location found.")
                infoWindow.open(map)
                map.setCenter(pos)
            }, () => { handleLocationError(true, infoWindow, map.getCenter()) }
        )} else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter())
        }
    });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos)
    infoWindow.setContent(
        browserHasGeolocation ? "Error: The Geolocation service failed!" : "Error: Your browser doesn't support geolocation!"
    )
    infoWindow.open(map)
}

initMap()
                            
                        

☞