WebGL (Beta)

WebglOverlayView class

google.maps.WebglOverlayView class

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.

This class extends MVCObject.

WebglOverlayView
WebglOverlayView()
Parameters:  None
Creates an WebglOverlayView.
getMap
getMap()
Parameters:  None
Return Value:  Map optional
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.
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(gl)
Parameters: 
  • glWebGLRenderingContext rendering context for developers to access WebGL.
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(gl, transformer)
Parameters: 
  • glWebGLRenderingContext rendering context for developers to access WebGL.
  • transformerCoordinateTransformer convenience class for providing camera transforms to center objects at latitude/longitude coordinates.
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.
onGlStateUpdate
onGlStateUpdate(gl)
Parameters: 
  • glWebGLRenderingContext rendering context for developers to access WebGL.
Return Value:  None
Implement this method to handle any GL state updates outside of the render animation frame.
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.
requestGlStateUpdate
requestGlStateUpdate()
Parameters:  None
Return Value:  None
Triggers the map to update GL state.
requestRedraw
requestRedraw()
Parameters:  None
Return Value:  None
Triggers the map to redraw a frame.
setMap
setMap([map])
Parameters: 
  • mapMap optional 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

WebglCameraParams interface

google.maps.WebglCameraParams interface

A WebglCameraParams is a snapshot of camera properties used to render the current frame.

heading
Type:  number
Heading of the camera in degrees.
lat
Type:  number
Latitude in degrees.
lng
Type:  number
Longitude in degrees.
tilt
Type:  number
Angle of incidence of the camera, in degrees.
zoom
Type:  number
Zoom level of the camera.

CoordinateTransformer interface

google.maps.CoordinateTransformer interface

This class 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.

fromLatLngAltitude
fromLatLngAltitude(latLng, altitude[, rotations, scale])
Parameters: 
  • latLngLatLng|LatLngLiteral
  • altitudenumber in meters
  • rotationsFloat32Array optional Array that contains euler rotation angles specified in degrees.
  • scaleFloat32Array optional Array of scalars to apply to the cardinal axis.
Return Value:  Float64Array MVP matrix to use with WebGL.
getCameraParams
getCameraParams()
Parameters:  None
Return Value:  WebglCameraParams camera parameters