Thay đổi chế độ bản đồ

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        // Hide the default UI controls, since this sample has its own mode selector.
        defaultUIHidden: true,
    });

    document.body.append(map);

    // Change the map mode when a new option is selected.
    const selector = document.getElementById('map-mode') as HTMLSelectElement;
    selector.addEventListener('change', () => {
        map.mode = selector.value as google.maps.maps3d.MapModeString;
    });
}

void init();
index.ts

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        // Hide the default UI controls, since this sample has its own mode selector.
        defaultUIHidden: true,
    });

    document.body.append(map);

    // Change the map mode when a new option is selected.
    const selector = document.getElementById('map-mode');
    selector.addEventListener('change', () => {
        map.mode = selector.value;
    });
}

void init();
index.js

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
    height: 100%;
    width: 100%;
}

/* Position the selector where the default map mode control would be. */
.map-mode-control {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(60, 64, 67, 0.3),
        0 2px 6px 2px rgba(60, 64, 67, 0.15);
}

.map-mode-control label {
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
}

.map-mode-control select {
    appearance: none;
    padding: 6px 32px 6px 12px;
    font-family: inherit;
    font-size: 14px;
    color: #202124;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6368' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    cursor: pointer;
}

.map-mode-control select:hover {
    background-color: #f8f9fa;
}

.map-mode-control select:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
}
style.css

<html>
    <head>
        <title>3d-map-roadmap</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>

    <body>
        <div class="map-mode-control">
            <label for="map-mode">Map mode</label>
            <select id="map-mode">
                <option value="ROADMAP" selected>Roadmap</option>
                <option value="SATELLITE">Satellite</option>
                <option value="HYBRID">Hybrid</option>
            </select>
        </div>
    </body>
</html>
index.html