diff --git a/samples/3d-simple-map/index.html b/samples/3d-simple-map/index.html index 24ab4306..ba3822e3 100644 --- a/samples/3d-simple-map/index.html +++ b/samples/3d-simple-map/index.html @@ -1,7 +1,7 @@ @@ -11,11 +11,18 @@ - - + + + + diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 4cee1831..7079e2bd 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -1,22 +1,29 @@ /* * @license - * Copyright 2025 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ - -//@ts-nocheck // [START maps_3d_simple_map] async function initMap() { + //@ts-ignore const { Map3DElement } = await google.maps.importLibrary('maps3d'); - const map = new Map3DElement({ - center: { lat: 37.7704, lng: -122.3985, altitude: 500 }, - tilt: 67.5, - mode: 'HYBRID', - gestureHandling: 'COOPERATIVE', - }); + // Get the gmp-map element. + const mapElement = document.querySelector( + 'gmp-map-3d' + //@ts-ignore + ) as Map3DElement; - document.body.append(map); + // Wait for the map to finish loading. + google.maps.event.addListenerOnce(mapElement, 'tilesloaded', () => { + // Get the inner map. + const innerMap = mapElement.innerMap; + + // Set map options. + innerMap.setOptions({ + mapTypeControl: false, + }); + }); } initMap(); diff --git a/samples/3d-simple-map/style.css b/samples/3d-simple-map/style.css index db29d516..1b36debf 100644 --- a/samples/3d-simple-map/style.css +++ b/samples/3d-simple-map/style.css @@ -1,15 +1,13 @@ /* * @license -* Copyright 2025 Google LLC. All Rights Reserved. +* Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_simple_map] */ /* * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#gmp-map-3d { - height: 100%; -} + html, body { height: 100%;