<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/reference/webgl_d691dbe444713f509ed1f7639820e9902233b8269c2aa8eebde29d44c3947bb0.frame" class="framebox inherit-locale redirect-iframe" allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## [WebGLOverlayView](https://developers.google.com/maps/documentation/javascript/reference/webgl.md.txt#WebGLOverlayView)
class


class
`google.maps.WebGLOverlayView`
extends `MVCObject`

library `"maps"`

The WebGL Overlay View provides direct access to the same WebGL rendering context Google Maps Platform uses to render the vector basemap. This use of a shared rendering context provides benefits such as depth occlusion with 3D building geometry, and the ability to sync 2D/3D content with basemap rendering.   

With WebGL Overlay View you can add content to your maps using WebGL directly, or popular Graphics libraries like Three.js or deck.gl. To use the overlay, you can extend `google.maps.WebGLOverlayView` and provide an implementation for each of the following lifecycle hooks: `WebGLOverlayView.onAdd`, `WebGLOverlayView.onContextRestored`, `WebGLOverlayView.onDraw`, `WebGLOverlayView.onContextLost` and `WebGLOverlayView.onRemove`.   

You must call `WebGLOverlayView.setMap` with a valid `Map` object to trigger the call to the `onAdd()` method and `setMap(null)` in order to trigger the `onRemove()` method. The `setMap()` method can be called at the time of construction or at any point afterward when the overlay should be re-shown after removing. The `onDraw()` method will then be called whenever a map property changes that could change the position of the element, such as zoom, center, or map type. WebGLOverlayView may only be added to a vector map having a `MapOptions.mapId` (including maps set to the `RenderingType.VECTOR` `MapOptions.renderingType` and using `Map.DEMO_MAP_ID` as the `MapOptions.mapId`).

```javascript
const {WebGLOverlayView} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `WebGLOverlayView` | `WebGLOverlayView()` **Parameters:** None Creates a `WebGLOverlayView`. |

| ### Methods ||
|---|---|
| `getMap` | `getMap()` **Parameters:** None **Return Value:** `Map|null|undefined` |
| `onAdd` | `onAdd()` **Parameters:** None **Return Value:** None Implement this method to fetch or create intermediate data structures before the overlay is drawn that don't require immediate access to the WebGL rendering context. This method must be implemented to render. |
| `onContextLost` | `onContextLost()` **Parameters:** None **Return Value:** None This method is called when the rendering context is lost for any reason, and is where you should clean up any pre-existing GL state, since it is no longer needed. |
| `onContextRestored` | `onContextRestored(options)` **Parameters:** - `options: WebGLStateOptions` that allow developers to restore the GL context. **Return Value:** None This method is called once the rendering context is available. Use it to initialize or bind any WebGL state such as shaders or buffer objects. |
| `onDraw` | `onDraw(options)` **Parameters:** - `options: WebGLDrawOptions` that allow developers to render content to an associated Google basemap. **Return Value:** None Implement this method to draw WebGL content directly on the map. Note that if the overlay needs a new frame drawn then call `WebGLOverlayView.requestRedraw`. |
| `onRemove` | `onRemove()` **Parameters:** None **Return Value:** None This method is called when the overlay is removed from the map with `WebGLOverlayView.setMap(null)`, and is where you should remove all intermediate objects. This method must be implemented to render. |
| `onStateUpdate` | `onStateUpdate(options)` **Parameters:** - `options: WebGLStateOptions` that allow developerse to restore the GL context. **Return Value:** None Implement this method to handle any GL state updates outside of the render animation frame. |
| `requestRedraw` | `requestRedraw()` **Parameters:** None **Return Value:** None Triggers the map to redraw a frame. |
| `requestStateUpdate` | `requestStateUpdate()` **Parameters:** None **Return Value:** None Triggers the map to update GL state. |
| `setMap` | `setMap([map])` **Parameters:** - `map: Map optional` The map to access the div, model and view state. **Return Value:** None Adds the overlay to the map. |

## [WebGLDrawOptions](https://developers.google.com/maps/documentation/javascript/reference/webgl.md.txt#WebGLDrawOptions)
interface


interface
`google.maps.WebGLDrawOptions`

Drawing options.

| ### Properties ||
|---|---|
| `gl` | **Type:** `WebGLRenderingContext` The WebGLRenderingContext on which to render this WebGLOverlayView. |
| `transformer` | **Type:** `CoordinateTransformer` The matrix transformation from camera space to latitude/longitude coordinates. |

## [WebGLStateOptions](https://developers.google.com/maps/documentation/javascript/reference/webgl.md.txt#WebGLStateOptions)
interface


interface
`google.maps.WebGLStateOptions`

GL state options.

| ### Properties ||
|---|---|
| `gl` | **Type:** `WebGLRenderingContext` The WebGLRenderingContext on which to render this WebGLOverlayView. |

## [CoordinateTransformer](https://developers.google.com/maps/documentation/javascript/reference/webgl.md.txt#CoordinateTransformer)
interface


interface
`google.maps.CoordinateTransformer`

This interface provides convenience methods for generating matrices to use for rendering WebGL scenes on top of the Google base map.   

Note: A reference to this object should **not** be held outside of the scope of the encapsulating `WebGLOverlayView.onDraw` call.

| ### Methods ||
|---|---|
| `fromLatLngAltitude` | `fromLatLngAltitude(latLngAltitude[, rotations, scale])` **Parameters:** - `latLngAltitude: LatLngAltitude|LatLngAltitudeLiteral` Latitude, longitude, and altitude. - `rotations: Float32Array optional` An array that contains an Euler rotation angle in degrees, in the XYZ convention. - `scale: Float32Array optional` Array that contains an XYZ scalar array to apply to the cardinal axis. **Return Value:** `Float64Array` MVP matrix to use with WebGL. |
| `getCameraParams` | `getCameraParams()` **Parameters:** None **Return Value:** `CameraParams` camera parameters |

## [CameraParams](https://developers.google.com/maps/documentation/javascript/reference/webgl.md.txt#CameraParams)
interface


interface
`google.maps.CameraParams`
extends `CameraOptions`

Used for retrieving camera parameters, such as that of the GL camera used for the `WebGLOverlayView`.

| ### Properties ||
|---|---|
| `center` | **Type:** `LatLng` |
| `heading` | **Type:** `number` |
| `tilt` | **Type:** `number` |
| `zoom` | **Type:** `number` |