Skip to main content

Using with Google Maps Platform

Pure JSReactOverlaidInterleaved
✓✓exampleexample

deck.gl as a Google Maps overlay

Deck.gl has interleaved and overlaid support for Google Maps with the @deck.gl/google-maps module. It allows you to construct a Deck instance and apply it to a map using the Maps JavaScript API.

See Google Maps documentation](/deck.gl/docs/api-reference/google-maps/overview) page for a full list of features.

Google Maps Platform API key​

Note that to use deck.gl with the Google's basemap, you must load the Maps JavaScript API using a valid API key. For more information on getting an API key, see the Google Maps Platform API key documentation for the Maps JavaScript API.

Using interleaved​

Starting with v8.6, deck.gl added interleaving support on Google's vector map, using the Maps JavaScript API WebGLOverlayView class.

When a Deck instance is applied to the map, deck.gl detects whether it is an instance of the vector map, then automatically enables interleaving. For information on how to enable the Google's vector map for the web, see the Maps JavaScript API documentation.

By default, when a Deck instance is added to the map, deck.gl will detect if the map is an instance of the vector map and enable interleaved mode. If the vector map is not detected or the user's device does not support WebGL2, deck.gl will automatically fallback to overlaid mode.

Using overlaid​

Starting with v7.0, deck.gl added support to overlay visualizations on Google's raster map using the Maps JavaScript API OverlayView class.

In this mode, the Deck canvas can only be used as a overlay on top of Google Maps, see pure JS example, and 3D features like tilt, rotation, and interleaving are not supported.