Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, andshare your input to help shape the future of GMP!

WebGL

WebGLOverlayViewclass

google.maps.WebGLOverlayViewclass

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 extendgoogle.maps.WebGLOverlayView and provide an implementation for each of the following lifecycle hooks:WebGLOverlayView.onAdd,WebGLOverlayView.onContextRestored,WebGLOverlayView.onDraw,WebGLOverlayView.onContextLost andWebGLOverlayView.onRemove.

You must callWebGLOverlayView.setMap with a validMap object to trigger the call to theonAdd() method andsetMap(null) in order to trigger theonRemove() method. ThesetMap() method can be called at the time of construction or at any point afterward when the overlay should be re-shown after removing. TheonDraw() 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 aMapOptions.mapId (including maps set to theRenderingType.VECTORMapOptions.renderingType and usingMap.DEMO_MAP_ID as theMapOptions.mapId).

This class extendsMVCObject.

Access by callingconst {WebGLOverlayView} = await google.maps.importLibrary("maps").
SeeLibraries in the Maps JavaScript API.

Constructor

WebGLOverlayView
WebGLOverlayView()
Parameters:  None
Creates aWebGLOverlayView.

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: 
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 callWebGLOverlayView.requestRedraw.
onRemove
onRemove()
Parameters:  None
Return Value:  None
This method is called when the overlay is removed from the map withWebGLOverlayView.setMap(null), and is where you should remove all intermediate objects. This method must be implemented to render.
onStateUpdate
onStateUpdate(options)
Parameters: 
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: Mapoptional The map to access the div, model and view state.
Return Value:  None
Adds the overlay to the map.
Inherited:addListener,bindTo,get,notify,set,setValues,unbind,unbindAll

WebGLDrawOptionsinterface

google.maps.WebGLDrawOptionsinterface

Drawing options.

Properties

gl
The WebGLRenderingContext on which to render this WebGLOverlayView.
transformer
The matrix transformation from camera space to latitude/longitude coordinates.

WebGLStateOptionsinterface

google.maps.WebGLStateOptionsinterface

GL state options.

Properties

gl
The WebGLRenderingContext on which to render this WebGLOverlayView.

CoordinateTransformerinterface

google.maps.CoordinateTransformerinterface

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 shouldnot be held outside of the scope of the encapsulatingWebGLOverlayView.onDraw call.

Methods

fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
Parameters: 
  • latLngAltitude: LatLngAltitude|LatLngAltitudeLiteral Latitude, longitude, and altitude.
  • rotations: Float32Arrayoptional An array that contains an Euler rotation angle in degrees, in the XYZ convention.
  • scale: Float32Arrayoptional 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

CameraParamsinterface

google.maps.CameraParamsinterface

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

This interface extendsCameraOptions.

Properties

center
Type: LatLng
heading
Type: number
tilt
Type: number
zoom
Type: number

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-18 UTC.