Cannot interact with a Google Map Marker before it has been

Error message

Cannot interact with a Google Map Marker before it has been initialized. Please wait for the Marker to load before trying to interact with it.

What it means

Thrown by MapMarker's dev-mode assertion when its internal google.maps.Marker is still undefined. The marker is created asynchronously after the map and marker inputs are ready. The guard makes premature interaction fail with a clear, searchable message in dev mode.

Source

Thrown at src/google-maps/map-marker/map-marker.ts:495

  /** Creates a combined options object using the passed-in options and the individual inputs. */
  private _combineOptions(): google.maps.MarkerOptions {
    const options = this._options || DEFAULT_MARKER_OPTIONS;
    return {
      ...options,
      title: this._title || options.title,
      position: this._position || options.position,
      label: this._label || options.label,
      clickable: this._clickable ?? options.clickable,
      map: this._googleMap.googleMap,
      icon: this._icon || options.icon,
      visible: this._visible ?? options.visible,
    };
  }

  private _assertInitialized(): asserts this is {marker: google.maps.Marker} {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this.marker) {
        throw Error(
          'Cannot interact with a Google Map Marker before it has been ' +
            'initialized. Please wait for the Marker to load before trying to interact with it.',
        );
      }
    }
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Defer accessor calls to after view init / map ready (subscribe to MapComponent.ready).
Interact with markers via template bindings (position/options inputs) instead of imperative getters during setup.
Ensure the marker is inside a MapComponent and the Maps API loaded.
If reading marker state in event handlers, only handle events after the marker signals ready (ngAfterViewInit).
Wrap getter calls in try-catch in dev builds for resilience.

Example fix

// before
ngOnInit() {
  const draggable = this.marker.getDraggable(); // throws
}
// after
ngAfterViewInit() {
  this.map.ready.subscribe(() => {
    const draggable = this.marker.getDraggable();
  });
}

Defensive patterns

Strategy: validation

Validate before calling

if (!markerRef) { /* defer accessor call */ }

Type guard

function isMarkerReady(m: MapMarker | undefined): m is MapMarker { return !!m; }

Try / catch

try {
  const icon = marker.getIcon();
} catch (e) {
  if ((e as Error).message.includes('Google Map Marker')) {
    // defer to map ready
  } else { throw e; }
}

Prevention

Read marker state after ngAfterViewInit or map ready.
Configure markers via inputs, not imperative calls at mount.
Keep markers inside MapComponent.
Handle marker events only after ready flag set.
Avoid stale refs after *ngIf recreation.

When it happens

Trigger: Calling getAnimation(), getClickable(), getCursor(), getDraggable(), getIcon() (and other accessors routed through _assertInitialized) before marker creation — typically in ngOnInit, immediately after dynamic creation, or when the marker isn't attached to an initialized map.

Common situations: Reading marker properties right after mounting, *ngFor markers whose accessors are read by a parent in the same change-detection pass, Google Maps API still loading, marker used outside a MapComponent.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/a2ea70d50140c9ef. Report an issue: GitHub.