angular/components · error · Error

Maps event target that uses native events must have `addEven

Error message

Maps event target that uses native events must have `addEventListener` and `removeEventListener` methods.

What it means

When a Google Maps component subscribes to 'native' DOM events, the event manager attaches listeners directly to the target element via addEventListener/removeEventListener. This error is thrown (only in dev mode) when the object passed as an event target is missing either of those two methods, meaning the listener could not be attached reliably.

Source

Thrown at src/google-maps/map-event-manager.ts:72

      switchMap(target => {
        const observable = new Observable<T>(observer => {
          // If the target hasn't been initialized yet, cache the observer so it can be added later.
          if (!target) {
            this._pending.push({observable, observer});
            return undefined;
          }

          let handle: ListenerHandle;
          const listener = (event: T) => {
            this._ngZone.run(() => observer.next(event));
          };

          if (type === 'native') {
            if (
              (typeof ngDevMode === 'undefined' || ngDevMode) &&
              (!target.addEventListener || !target.removeEventListener)
            ) {
              throw new Error(
                'Maps event target that uses native events must have `addEventListener` and `removeEventListener` methods.',
              );
            }

            target.addEventListener!(name, listener);
            handle = {remove: () => target.removeEventListener!(name, listener)};
          } else {
            handle = target.addListener(name, listener)!;
          }

          // If there's an error when initializing the Maps API (e.g. a wrong API key), it will
          // return a dummy object that returns `undefined` from `addListener` (see #26514).
          if (!handle) {
            observer.complete();
            return undefined;
          }

          this._listeners.push(handle);

View on GitHub (pinned to 0411926e7d)

Solutions

1. Pass the actual native object (e.g. marker advancedMarkerElement content element, or the map's underlying DOM element) that implements addEventListener/removeEventListener
2. Ensure your custom target implements both addEventListener(type, listener) and removeEventListener(type, listener), delegating to the underlying element
3. If the event should be handled via the Maps JS API event system instead, use the correct event type (not 'native')

Example fix

// before
class FakeTarget { }
manager.getLazyEmitter('click').subscribe(...) // throws: no addEventListener
// after
class FakeTarget {
  addEventListener(t: string, l: EventListener) { el.addEventListener(t, l); }
  removeEventListener(t: string, l: EventListener) { el.removeEventListener(t, l); }
}

if (typeof target.addEventListener !== 'function' || typeof target.removeEventListener !== 'function') {
  throw new TypeError('Event target must implement addEventListener and removeEventListener');
}

function isNativeEventTarget(t: unknown): t is EventTargetLike {
  return !!t && typeof (t as any).addEventListener === 'function' && typeof (t as any).removeEventListener === 'function';
}
interface EventTargetLike { addEventListener(type: string, l: EventListener): void; removeEventListener(type: string, l: EventListener): void; }

try {
  emitter = manager.getLazyEmitter('click');
} catch (e) {
  console.error('Invalid native event target:', e);
  // fall back to a different target or skip subscription
}

When it happens

Trigger: Passing a custom object (e.g. a Marker-like wrapper, a proxied element, or a plain object) to MapEventManager.getLazyEmitter or to event-observable helpers where the event type resolves to 'native' and the target lacks addEventListener or removeEventListener methods.

Common situations: Wrapping Google Maps objects in custom classes that forward only some methods; using mocks/stubs from tests as event targets; using an older/alternate Maps API object shape; forgetting to spread or delegate the native event methods.

Related errors

• MarkerClusterer class not found, cannot construct a marker c
• Cannot interact with a MarkerClusterer before it has been in
• Namespace google not found, cannot construct embedded google
• Cannot access Google Map information before the API has been
• Cannot interact with a Google Map Marker before it has been

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