@deck.gl/google-maps

Use deck.gl layers as a custom Google Maps overlay.

Installation

Include the Standalone Bundle

<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^7.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/google-maps@^7.0.0/dist.min.js"></script>
<!-- usage -->
<script type="text/javascript">
  const {GoogleMapsOverlay} = deck;
</script>

Install from NPM

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/google-maps

import {GoogleMapsOverlay} from '@deck.gl/google-maps';

Vector/Raster maps

Starting with Google Maps v3.45 there are two modes of rendering Vector and Raster. To control which rendering mode is used, you need to configure the Google Map using the Google Cloud Platform.

From v8.6, the GoogleMapsOverlay class automatically detects at runtime which rendering type is used. The Vector rendering mode is in general more performant, and the GoogleMapsOverlay class offers several features not available when using Raster rendering:

• Shared 3D space: objects drawn by the GoogleMapsOverlay class appear inside the Google Maps scene, correctly intersecting with 3D buildings and behind the contextual labels drawn by Google Maps
• Tilting and rotating the view is supported
• Rendering uses the same WebGL context as Google Maps, improving performance

Supported Features and Limitations

Supported deck.gl features:

• Layers
• Effects
• Auto-highlighting
• Attribute transitions
• onHover and onClick callbacks
• Tooltip
• Tilting & Rotation (Vector maps only)

Not supported features:

• Views
• Controller
• React integration
• Gesture event callbacks (e.g. onDrag*)