fix: Updates samples to use correct marker event name. (#1268)

* fix: Updates samples to use correct marker event name.

* Add gmpClickable property to AdvancedMarkerElement

* Enable marker to be clickable on the map

* Enable clickable markers in weather API map

Author: willum070

samples/advanced-markers-accessibility/index.ts

@@ -64,7 +64,7 @@ async function initMap() {
         // [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.
-        marker.addListener('click', ({ domEvent, latLng }) => {
+        marker.addEventListener('gmp-click', (domEvent) => {
             const { target } = domEvent;
             infoWindow.close();
             infoWindow.setContent(marker.title);

samples/deckgl-heatmap/index.ts

@@ -155,7 +155,7 @@ async function initMap(): Promise<void> {
             });
 
             // Add click listener to the marker
-            marker.addListener('click', () => {
+            marker.addEventListener('gmp-click', () => {
                 infoWindow.close();
                 const content = `
             <div>Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}</div>

samples/event-simple/index.ts

@@ -24,6 +24,7 @@ async function initMap() {
         position: center,
         map: innerMap,
         title: 'Click to zoom',
+        gmpClickable: true,
     });
 
     innerMap.addListener('center_changed', () => {
@@ -35,7 +36,7 @@ async function initMap() {
     });
 
     // Zoom in when the marker is clicked.
-    marker.addListener('click', () => {
+    marker.addListener('gmp-click', () => {
         innerMap.setZoom(8);
         innerMap.setCenter(marker.position as google.maps.LatLng);
     });

samples/places-placeid-finder/index.ts

@@ -57,9 +57,10 @@ async function initMap(): Promise<void> {
         map: map,
         collisionBehavior:
             google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
+        gmpClickable: true,
     });
 
-    marker.addListener('click', () => {
+    marker.addEventListener('gmp-click', () => {
         infowindow.open(map, marker);
     });
 

samples/weather-api-current-compact/index.ts

@@ -139,6 +139,7 @@ async function createAndAddMarker(
         position: { lat: location.lat, lng: location.lng },
         content: weatherWidget,
         title: location.name, // Add a title for accessibility
+        gmpClickable: true,
     });
 
     // Store the marker type
@@ -152,7 +153,7 @@ async function createAndAddMarker(
     );
 
     // Add click listener to the marker
-    marker.addListener('click', () => {
+    marker.addEventListener('gmp-click', () => {
         const widgetContainer = weatherWidget.shadowRoot!.querySelector(
             '.widget-container'
         ) as HTMLDivElement;