From 5a9dc537c4a462319e20ccb4618360c6637ecfdd Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 6 Oct 2025 13:09:20 -0700 Subject: [PATCH 1/3] feat: Updates sample to use gmp-map element. Change-Id: I85acd733a5a79b705a0695ba3bf0fca26fadbd20 --- samples/advanced-markers-accessibility/index.html | 6 +++--- samples/advanced-markers-accessibility/index.ts | 11 +++++------ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/samples/advanced-markers-accessibility/index.html b/samples/advanced-markers-accessibility/index.html index 1eb28a32..5ac5d4a7 100644 --- a/samples/advanced-markers-accessibility/index.html +++ b/samples/advanced-markers-accessibility/index.html @@ -11,13 +11,13 @@ - - -
+ + + diff --git a/samples/advanced-markers-accessibility/index.ts b/samples/advanced-markers-accessibility/index.ts index ad2204f1..0b83bd9d 100644 --- a/samples/advanced-markers-accessibility/index.ts +++ b/samples/advanced-markers-accessibility/index.ts @@ -5,16 +5,15 @@ */ // [START maps_advanced_markers_accessibility] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; + async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - const map = new Map(document.getElementById("map") as HTMLElement, { - zoom: 12, - center: { lat: 34.84555, lng: -111.8035 }, - mapId: '4504f8b37365c3d0', - }); + innerMap = mapElement.innerMap; // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to move @@ -54,7 +53,7 @@ async function initMap() { // [START maps_advanced_markers_accessibility_marker] const marker = new AdvancedMarkerElement({ position, - map, + map: innerMap, title: `${i + 1}. ${title}`, content: pin.element, gmpClickable: true, From f8d1ae89140c7f1d89e071a1d2015d45b85de39a Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 7 Oct 2025 09:00:44 -0700 Subject: [PATCH 2/3] Attach marker to mapElement instead of innerMap --- samples/advanced-markers-accessibility/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/samples/advanced-markers-accessibility/index.ts b/samples/advanced-markers-accessibility/index.ts index 0b83bd9d..81f21a63 100644 --- a/samples/advanced-markers-accessibility/index.ts +++ b/samples/advanced-markers-accessibility/index.ts @@ -53,11 +53,12 @@ async function initMap() { // [START maps_advanced_markers_accessibility_marker] const marker = new AdvancedMarkerElement({ position, - map: innerMap, title: `${i + 1}. ${title}`, content: pin.element, gmpClickable: true, }); + + mapElement.append(marker); // [END maps_advanced_markers_accessibility_marker] // [START maps_advanced_markers_accessibility_event_listener] // Add a click listener for each marker, and set up the info window. @@ -72,4 +73,4 @@ async function initMap() { } initMap(); -// [END maps_advanced_markers_accessibility] \ No newline at end of file +// [END maps_advanced_markers_accessibility] From ad9d77ac0296939416d3427f682ef1f73e856c34 Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 9 Oct 2025 09:15:28 -0700 Subject: [PATCH 3/3] Change Google Maps API version from beta to weekly --- samples/advanced-markers-accessibility/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/advanced-markers-accessibility/index.html b/samples/advanced-markers-accessibility/index.html index 5ac5d4a7..0489d6fe 100644 --- a/samples/advanced-markers-accessibility/index.html +++ b/samples/advanced-markers-accessibility/index.html @@ -14,7 +14,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});