Use deck.gl layers as a custom Google Maps overlay.
<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>
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/google-maps
import {GoogleMapsOverlay} from '@deck.gl/google-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:
GoogleMapsOverlay
class appear inside the Google Maps scene, correctly intersecting with 3D buildings and behind the contextual labels drawn by Google MapsSupported deck.gl features:
onHover
and onClick
callbacksNot supported features:
onDrag*
)