fix: use correct pointer events behaviour (#997)

Author: mrMetalWood

src/components/__tests__/advanced-marker.test.tsx

@@ -161,6 +161,40 @@ describe('map and marker-library loaded', () => {
     ).toBeTruthy();
   });
 
+  test('disables custom content pointer targeting when clickable toggles off', async () => {
+    const handleClick = jest.fn();
+
+    const {rerender} = render(
+      <AdvancedMarker
+        position={{lat: 1, lng: 2}}
+        clickable={true}
+        onClick={handleClick}>
+        <div data-testid={'marker-content'}>Marker Content!</div>
+      </AdvancedMarker>
+    );
+
+    const marker = await waitForMockInstance(
+      google.maps.marker.AdvancedMarkerElement
+    );
+
+    expect(marker.gmpClickable).toBe(true);
+    expect((marker.content as HTMLElement).style.pointerEvents).toBe('all');
+    expect((marker.content as HTMLElement).style.cursor).toBe('pointer');
+
+    rerender(
+      <AdvancedMarker
+        position={{lat: 1, lng: 2}}
+        clickable={false}
+        onClick={handleClick}>
+        <div data-testid={'marker-content'}>Marker Content!</div>
+      </AdvancedMarker>
+    );
+
+    expect(marker.gmpClickable).toBe(false);
+    expect((marker.content as HTMLElement).style.pointerEvents).toBe('none');
+    expect((marker.content as HTMLElement).style.cursor).toBe('');
+  });
+
   test.todo('marker should work with options');
   test.todo('marker should have a click listener');
 

src/components/advanced-marker.tsx

@@ -312,23 +312,22 @@ function useAdvancedMarker(props: AdvancedMarkerProps) {
     // maps api (as of 2024-10-10)
     marker.gmpClickable = gmpClickable;
 
-    // enable pointer events for the markers with custom content
-    if (gmpClickable && marker?.content && isElementNode(marker.content)) {
-      marker.content.style.pointerEvents = 'all';
-
-      if (onClick) {
-        marker.content.style.cursor = 'pointer';
-      }
+    // keep pointer/cursor styles in sync for markers with custom content.
+    // Non-clickable custom HTML must disable pointer targeting explicitly so
+    // interactions fall through to the map underneath.
+    if (marker?.content && isElementNode(marker.content)) {
+      marker.content.style.pointerEvents = gmpClickable ? 'all' : 'none';
+      marker.content.style.cursor = gmpClickable && onClick ? 'pointer' : '';
     }
   }, [marker, clickable, onClick, onMouseEnter, onMouseLeave]);
 
-  useMapsEventListener(marker, 'click', onClick);
   useMapsEventListener(marker, 'drag', onDrag);
   useMapsEventListener(marker, 'dragstart', onDragStart);
   useMapsEventListener(marker, 'dragend', onDragEnd);
 
-  useDomEventListener(marker?.element, 'mouseenter', onMouseEnter);
-  useDomEventListener(marker?.element, 'mouseleave', onMouseLeave);
+  useDomEventListener(marker, 'gmp-click', onClick);
+  useDomEventListener(marker, 'mouseenter', onMouseEnter);
+  useDomEventListener(marker, 'mouseleave', onMouseLeave);
 
   return [marker, contentContainer] as const;
 }