diff --git a/modules/google-maps/src/google-maps-overlay.ts b/modules/google-maps/src/google-maps-overlay.ts index a16af2b3734..34c68a86906 100644 --- a/modules/google-maps/src/google-maps-overlay.ts +++ b/modules/google-maps/src/google-maps-overlay.ts @@ -164,7 +164,7 @@ export default class GoogleMapsOverlay { // Create WebGL overlay for camera data (and GL context if interleaved) const overlay = new google.maps.WebGLOverlayView(); - overlay.onAdd = noop; + overlay.onAdd = interleaved ? this._onAddInterleaved.bind(this) : noop; overlay.onContextRestored = interleaved ? this._onContextRestored.bind(this) : noop; overlay.onDraw = this._onDrawVector.bind(this); overlay.onContextLost = interleaved ? this._onContextLost.bind(this) : noop; @@ -205,6 +205,23 @@ export default class GoogleMapsOverlay { this._deck = createDeckInstance(this._map, overlay, this._deck, this.props); } + _onAddInterleaved() { + // When a WebGLOverlayView is removed and a new one is added to the same map, + // Google Maps may skip onContextRestored because the WebGL context was never + // actually lost. In that case, retrieve the existing GL context from the map's + // canvas and initialize the deck instance here in onAdd. + if (!this._map) { + return; + } + const mapCanvas = this._map.getDiv().querySelector('canvas'); + if (mapCanvas) { + const gl = mapCanvas.getContext('webgl2'); + if (gl) { + this._onContextRestored({gl}); + } + } + } + _updateContainerSize() { // Update positioning container size and position to match map if (!this._map) return;