Cannot interact with a Google Map Polyline before it has bee

Error message

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

What it means

Thrown by MapPolyline's dev-mode assertion when its internal google.maps.Polyline is still undefined. The polyline object is created asynchronously after map/input initialization. The guard ensures premature interaction produces a clear dev-mode error.

Source

Thrown at src/google-maps/map-polyline/map-polyline.ts:250

    this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
      this._assertInitialized();
      this.polyline.setOptions(options);
    });
  }

  private _watchForPathChanges() {
    this._path.pipe(takeUntil(this._destroyed)).subscribe(path => {
      if (path) {
        this._assertInitialized();
        this.polyline.setPath(path);
      }
    });
  }

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

View on GitHub (pinned to 0411926e7d)

Solutions

Defer accessor calls until after map ready or ngAfterViewInit.
Drive polyline state via inputs ([options], [path]) and let change detection apply them instead of imperative getters at startup.
Ensure the polyline is inside an initialized MapComponent and the Maps API loaded.
If reading state after updates, wait for the corresponding Google Maps event or a microtask after change detection.
Wrap accessors in try-catch for dev resilience.

Example fix

// before
ngOnInit() {
  this.polyline.setVisible(true); // throws
}
// after
ngAfterViewInit() {
  this.map.ready.subscribe(() => this.polyline.setVisible(true));
}

Defensive patterns

Strategy: validation

Validate before calling

if (!polylineRef) { /* defer */ }

Type guard

function isPolylineReady(p: MapPolyline | undefined): p is MapPolyline { return !!p; }

Try / catch

try {
  polyline.setVisible(true);
} catch (e) {
  if ((e as Error).message.includes('Google Map Polyline')) {
    this.map.ready.subscribe(() => polyline.setVisible(true));
  } else { throw e; }
}

Prevention

Toggle polyline visibility after map ready.
Use [options] input binding instead of imperative calls at startup.
Keep polyline inside MapComponent template.
Sequence updates one change-detection cycle after mount.
Verify Maps API loads when errors persist.

When it happens

Trigger: Calling getDraggable(), getEditable(), getPath(), getVisible(), or triggering _watchForOptionsChanges before polyline construction — e.g. changing options inputs in the same tick as mount, calls in ngOnInit, or usage before the Maps API loads.

Common situations: Toggling polyline visibility immediately at bootstrap, reading path right after setting it, polyline rendered conditionally while old references persist, API script blocked or slow.

Related errors

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