Skip to content

[Bug] AdvancedMarker keeps inline pointer-events: all on content element after clickable toggles from true to false #990

@itshm-wk

Description

@itshm-wk

Description

When <AdvancedMarker> is used with custom content and clickable toggles from true to false, marker.gmpClickable updates correctly, but the inline pointer-events: all (and cursor: pointer when onClick is set) previously written to marker.content is never cleared. The content element keeps intercepting clicks / pointerup / mouseup, so map-level handlers do not fire on the marker area.

This matters for drawing or selection tools where the map needs to receive pointer events while a gesture is in progress.

In src/components/advanced-marker.tsx, the effect mirrors gmpClickable onto content styles only in the truthy branch and never resets:

if (gmpClickable && marker?.content && isElementNode(marker.content)) {
  marker.content.style.pointerEvents = 'all';
  if (onClick) {
    marker.content.style.cursor = 'pointer';
  }
}

Writing the value on every effect run (resetting to '' when not clickable) would address this.

Steps to Reproduce

Steps to Reproduce

function Example() {
  const [drawing, setDrawing] = useState(false);

  return (
    <Map
      mapId="DEMO_MAP_ID"
      defaultCenter={{ lat: 53.55, lng: 10.0 }}
      defaultZoom={10}
      onClick={() => console.log('map click')}
    >
      <button onClick={() => setDrawing(d => !d)}>toggle ({String(drawing)})

      <AdvancedMarker
        position={{ lat: 53.55, lng: 10.0 }}
        clickable={!drawing}
        onClick={() => console.log('marker click')}
      >
  );
}
  1. Toggle drawing to true so clickable becomes false.
  2. Inspect the content element — style="pointer-events: all" is still present.
  3. Click the red square — marker click is logged and the map's onClick does not fire.

Environment

  • Library version: @vis.gl/react-google-maps@1.8.3
  • Google maps version: weekly
  • Browser and Version: Chrome 148.0.7778.168
  • OS: MacOS

Logs


Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions