From 8ee2790e2d0519ca7e1dd119e4f188062e9ecd56 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 10:39:19 -0800 Subject: [PATCH 01/12] 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 02/12] 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 03/12] 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(); From 8994271950813343796c290c3d9392eaaf8977db Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 10:11:26 -0800 Subject: [PATCH 04/12] Change event listener to use customElements API This is a better pattern than addEventListenerOnce. --- samples/3d-simple-map/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 7079e2bde..a4b9686a0 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -15,7 +15,7 @@ async function initMap() { ) as Map3DElement; // Wait for the map to finish loading. - google.maps.event.addListenerOnce(mapElement, 'tilesloaded', () => { + customElements.whenDefined('gmp-map-3d').then(() => { // Get the inner map. const innerMap = mapElement.innerMap; From e78dd4e69818b24cca06a84761092c6e8ed75651 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 10:57:50 -0800 Subject: [PATCH 05/12] Refactor initMap to use native addEventListener. --- samples/3d-simple-map/index.ts | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index a4b9686a0..5a1972f60 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -5,25 +5,28 @@ */ // [START maps_3d_simple_map] async function initMap() { - //@ts-ignore - const { Map3DElement } = await google.maps.importLibrary('maps3d'); + await google.maps.importLibrary('maps3d'); // Get the gmp-map element. const mapElement = document.querySelector( 'gmp-map-3d' //@ts-ignore - ) as Map3DElement; + ) as google.maps.Map3DElement; - // Wait for the map to finish loading. - customElements.whenDefined('gmp-map-3d').then(() => { - // Get the inner map. - const innerMap = mapElement.innerMap; + mapElement.addEventListener( + 'gmp-ready', + () => { + console.log('The component signaled it is ready!'); + // Get the inner map. + const innerMap = mapElement.innerMap; - // Set map options. - innerMap.setOptions({ - mapTypeControl: false, - }); - }); + // Set map options. + innerMap.setOptions({ + mapTypeControl: false, + }); + }, + { once: true } + ); } initMap(); From c49d4b5761eeb65257b3d4a6e5881e0b59b15b71 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 12:45:16 -0800 Subject: [PATCH 06/12] Test with no event listener. Removed event listener for 'gmp-ready' and set map options directly. Also removed innerMap since it is not needed. --- samples/3d-simple-map/index.ts | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 5a1972f60..673f55f61 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -13,20 +13,10 @@ async function initMap() { //@ts-ignore ) as google.maps.Map3DElement; - mapElement.addEventListener( - 'gmp-ready', - () => { - console.log('The component signaled it is ready!'); - // Get the inner map. - const innerMap = mapElement.innerMap; - - // Set map options. - innerMap.setOptions({ - mapTypeControl: false, - }); - }, - { once: true } - ); + // Set map options. + mapElement.setOptions({ + mapTypeControl: false, + }); } initMap(); From 96c74cf3bcf7247dd555bd6d990466dab0b7ec88 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 12:51:50 -0800 Subject: [PATCH 07/12] Set map options using addEventListener Add JS event listener for 'gmp-ready' to set map options. --- samples/3d-simple-map/index.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 673f55f61..0c3b8341f 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -13,10 +13,18 @@ async function initMap() { //@ts-ignore ) as google.maps.Map3DElement; - // Set map options. - mapElement.setOptions({ - mapTypeControl: false, - }); + mapElement.addEventListener( + 'gmp-ready', + () => { + console.log('The component signaled it is ready!'); // I don't see this log in the console, which is unexpected. + + // Set map options. + mapElement.setOptions({ + mapTypeControl: false, + }); + }, + { once: true } + ); } initMap(); From 487dad4e6636eb858ef74bd24d72257cc3ddf1a6 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 13:21:10 -0800 Subject: [PATCH 08/12] Refactor map options setting for 3D map Removed event listener for 'gmp-ready' and directly set map options. --- samples/3d-simple-map/index.ts | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 0c3b8341f..673f55f61 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -13,18 +13,10 @@ async function initMap() { //@ts-ignore ) as google.maps.Map3DElement; - mapElement.addEventListener( - 'gmp-ready', - () => { - console.log('The component signaled it is ready!'); // I don't see this log in the console, which is unexpected. - - // Set map options. - mapElement.setOptions({ - mapTypeControl: false, - }); - }, - { once: true } - ); + // Set map options. + mapElement.setOptions({ + mapTypeControl: false, + }); } initMap(); From 3606d63ddfdf0bada2f7ea098f850c153e78ab59 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 13:28:14 -0800 Subject: [PATCH 09/12] Remove code for map type option. Removed map options setting for mapTypeControl. Now this "simple" sample is the most simple it can be. --- samples/3d-simple-map/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 673f55f61..0375f38f8 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -12,11 +12,6 @@ async function initMap() { 'gmp-map-3d' //@ts-ignore ) as google.maps.Map3DElement; - - // Set map options. - mapElement.setOptions({ - mapTypeControl: false, - }); } initMap(); From a3b87543329aa76cbfb1ffb2cbcd871869174f14 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 13:36:13 -0800 Subject: [PATCH 10/12] Apply suggestion from @chrisjshull Co-authored-by: Chris J. Shull --- samples/3d-simple-map/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 0375f38f8..747c99611 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -5,7 +5,7 @@ */ // [START maps_3d_simple_map] async function initMap() { - await google.maps.importLibrary('maps3d'); + google.maps.importLibrary('maps3d'); // Get the gmp-map element. const mapElement = document.querySelector( From 0a81be5fba58a8ce1730d297f2ee501404cac4e9 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 13:36:54 -0800 Subject: [PATCH 11/12] Apply suggestion from @chrisjshull Co-authored-by: Chris J. Shull --- samples/3d-simple-map/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 747c99611..f1e2834fd 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -7,11 +7,6 @@ async function initMap() { google.maps.importLibrary('maps3d'); - // Get the gmp-map element. - const mapElement = document.querySelector( - 'gmp-map-3d' - //@ts-ignore - ) as google.maps.Map3DElement; } initMap(); From 255b22700aaee901089e9dd665b82e2499b893de Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 5 Mar 2026 13:40:17 -0800 Subject: [PATCH 12/12] Remove extra newline in initMap function --- samples/3d-simple-map/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index f1e2834fd..e698833e6 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -6,7 +6,6 @@ // [START maps_3d_simple_map] async function initMap() { google.maps.importLibrary('maps3d'); - } initMap();