From 8ee2790e2d0519ca7e1dd119e4f188062e9ecd56 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 10:39:19 -0800 Subject: [PATCH 1/3] feat: Refactors 3d-simple-map to use declarative model. --- samples/3d-simple-map/index.html | 13 ++++++++++--- samples/3d-simple-map/index.ts | 24 ++++++++++++++---------- samples/3d-simple-map/style.css | 6 ++---- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/samples/3d-simple-map/index.html b/samples/3d-simple-map/index.html index 24ab4306d..ba3822e39 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 4cee18317..cf6014b2b 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -1,22 +1,26 @@ /* * @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); + // 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 db29d516a..1b36debf0 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%; From f80c7e33932f9c958a79d42c4629be085f64a469 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 26 Feb 2026 07:16:53 -0800 Subject: [PATCH 2/3] Add a check for inner map This change should tell us more about why the test is failing (I suspect it's a race condition) --- samples/3d-simple-map/index.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index cf6014b2b..79b119064 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -17,10 +17,15 @@ async function initMap() { // Get the inner map. const innerMap = mapElement.innerMap; - // Set map options. - innerMap.setOptions({ - mapTypeControl: false, - }); + if (!innerMap) { + console.error('Inner map not found.'); + return; + } else { + // Set map options. + innerMap.setOptions({ + mapTypeControl: false, + }); + } } initMap(); From fe8c813a554f80429834449373dffb9085ce6c92 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 26 Feb 2026 07:20:51 -0800 Subject: [PATCH 3/3] Add listener for map loading before accessing inner map Taking another tack: Wait for the map to finish loading before accessing the inner map. Hopefully this moves the needle correctly. --- samples/3d-simple-map/index.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 79b119064..7079e2bde 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -14,18 +14,16 @@ async function initMap() { //@ts-ignore ) as Map3DElement; - // Get the inner map. - const innerMap = mapElement.innerMap; + // Wait for the map to finish loading. + google.maps.event.addListenerOnce(mapElement, 'tilesloaded', () => { + // Get the inner map. + const innerMap = mapElement.innerMap; - if (!innerMap) { - console.error('Inner map not found.'); - return; - } else { // Set map options. innerMap.setOptions({ mapTypeControl: false, }); - } + }); } initMap();