refactor: migrate AdvancedMarkerElement to native DOM events

samples/advanced-markers-draggable/index.ts

@@ -25,7 +25,7 @@ async function init() {
     mapElement.append(draggableMarker);
     // [END maps_advanced_markers_draggable_marker]
 
-    draggableMarker.addListener('dragend', () => {
+    draggableMarker.addEventListener('gmp-dragend', () => {
         const position = draggableMarker.position!;
         infoWindow.close();
         infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);

samples/advanced-markers-html/index.ts

@@ -28,7 +28,7 @@
             title: property.description,
         });
 
-        advancedMarkerElement.addListener('click', () => {
+        advancedMarkerElement.addEventListener('gmp-click', () => {
             toggleHighlight(advancedMarkerElement);
         });
     }
@@ -72,17 +72,17 @@
         <div>
             <i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
             <span class="fa-sr-only">bedroom</span>
             <span>${property.bed}</span>
         </div>
         <div>
             <i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
             <span class="fa-sr-only">bathroom</span>
             <span>${property.bath}</span>
         </div>
         <div>
             <i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
             <span class="fa-sr-only">size</span>
             <span>${property.size} ft<sup>2</sup></span>
         </div>
         </div>
     </div>

samples/ai-powered-summaries-basic/index.ts

@@ -76,7 +76,7 @@
     // Add text to layout.
     address.textContent = place.formattedAddress ?? '';
     summary.textContent = overviewText ?? 'No summary is available.';
     attribution.textContent = overviewText ? `${disclosureText}  ` : '';
     if (overviewText) attribution.appendChild(reportingLink);
 
     content.append(address, lineBreak, summary, lineBreak, attribution);
@@ -84,7 +84,7 @@
     innerMap.setCenter(place.location!);
 
     // Handle marker click.
-    marker.addListener('gmp-click', () => {
+    marker.addEventListener('gmp-click', () => {
         showInfoWindow(marker, place, content);
     });
 

samples/event-closure/index.ts

@@ -58,7 +58,7 @@ async function attachSecretMessage(
         content: secretMessage,
     });
 
-    marker.addListener('gmp-click', () => {
+    marker.addEventListener('gmp-click', () => {
         infoWindow.open(marker.map, marker);
     });
 }

samples/place-nearby-search/index.ts

@@ -97,7 +97,7 @@
             // Build the content of the InfoWindow safely using DOM elements.
             const content = document.createElement('div');
             const address = document.createElement('div');
             address.textContent = place.formattedAddress || '';
             const placeId = document.createElement('div');
             placeId.textContent = place.id;
             content.append(address, placeId);
@@ -110,7 +110,7 @@
                 content.appendChild(link);
             }
 
-            marker.addListener('gmp-click', () => {
+            marker.addEventListener('gmp-click', () => {
                 innerMap.panTo(place.location!);
                 updateInfoWindow(place.displayName!, content, marker);
             });

samples/place-text-search/index.ts

@@ -85,7 +85,7 @@ async function findPlaces(query: string) {
             });
             markers[place.id] = marker;
 
-            marker.addListener('gmp-click', () => {
+            marker.addEventListener('gmp-click', () => {
                 map.panTo(place.location!);
                 updateInfoWindow(place.displayName!, place.id, marker);
             });

samples/polyline-utility/index.ts

@@ -3,7 +3,7 @@ async function init(): Promise<void> {
     const [
         { Polyline },
         { AdvancedMarkerElement },
-        { LatLng, LatLngBounds, event },
+        { LatLng, LatLngBounds },
         { PlaceAutocompleteElement },
         geometryLibrary,
     ] = await Promise.all([
@@ -112,9 +112,7 @@ async function init(): Promise<void> {
             gmpDraggable: true,
         });
 
-        marker.addListener('dragend', () => {
-            rebuildPathFromMarkers();
-        });
+        marker.addEventListener('gmp-dragend', rebuildPathFromMarkers);
 
         markers.push(marker);
         updateOutputs();
@@ -133,7 +131,10 @@ async function init(): Promise<void> {
 
     function removePoint(index: number) {
         if (index >= 0 && index < markers.length) {
-            event.clearInstanceListeners(markers[index]);
+            markers[index].removeEventListener(
+                'gmp-dragend',
+                rebuildPathFromMarkers
+            );
             markers[index].map = null;
             markers.splice(index, 1);
             rebuildPathFromMarkers();
@@ -142,7 +143,7 @@ async function init(): Promise<void> {
 
     function clearAll() {
         markers.forEach((m) => {
-            event.clearInstanceListeners(m);
+            m.removeEventListener('gmp-dragend', rebuildPathFromMarkers);
             m.map = null;
         });
         markers = [];

samples/ui-kit-advanced-place-search-nearby/index.ts

@@ -121,7 +121,7 @@ async function addMarkers() {
         markers.set(place.id, marker);
         bounds.extend(place.location);
 
-        marker.addListener('click', () => {
+        marker.addEventListener('gmp-click', () => {
             placeRequest.place = place;
             infoWindow.open(map.innerMap, marker);
         });

samples/ui-kit-advanced-place-search-text/index.ts

@@ -128,7 +128,7 @@ async function addMarkers() {
         markers.set(place.id, marker);
         bounds.extend(place.location);
 
-        marker.addListener('click', () => {
+        marker.addEventListener('gmp-click', () => {
             placeRequest.place = place;
             infoWindow.open(map.innerMap, marker);
         });

samples/ui-kit-place-search-nearby/index.ts

@@ -14,7 +14,7 @@
 )!;
 const placeDetails = document.querySelector('gmp-place-details-compact')!;
 const placeRequest = document.querySelector('gmp-place-details-place-request')!;
 const typeSelect = document.querySelector('.type-select') as HTMLSelectElement;
 /* [END maps_ui_kit_place_search_nearby_query_selectors] */
 
 // Global variables for the map, markers, and info window.
@@ -106,7 +106,7 @@
         markers.set(place.id, marker);
         bounds.extend(place.location);
 
-        marker.addListener('click', () => {
+        marker.addEventListener('gmp-click', () => {
             placeRequest.place = place;
             infoWindow.open(map.innerMap, marker);
         });

samples/ui-kit-place-search-text/index.ts

@@ -14,7 +14,7 @@
 )!;
 const placeDetails = document.querySelector('gmp-place-details-compact')!;
 const placeRequest = document.querySelector('gmp-place-details-place-request')!;
 const queryInput = document.querySelector('.query-input') as HTMLInputElement;
 const searchButton = document.querySelector('.search-button')!;
 /* [END maps_ui_kit_place_search_text_query_selectors] */
 
@@ -116,7 +116,7 @@
         markers.set(place.id, marker);
         bounds.extend(place.location);
 
-        marker.addListener('click', () => {
+        marker.addEventListener('gmp-click', () => {
             placeRequest.place = place;
             infoWindow.open(map.innerMap, marker);
         });