<ScriptGoogleMapsHeatmapLayer>
This script is deprecated and may be removed in a future version.
Heatmap visualization layer. Place inside a <ScriptGoogleMaps> component. The component automatically loads the visualization library.
Google deprecated HeatmapLayer in May 2025 and removed it from Maps JavaScript API v3.65 in May 2026. This component remains only for applications pinned to an older API version where the library is still available. Use deck.gl HeatmapLayer for new work.
optionsOmit<HeatmapLayerOptions, 'map'>Configuration options for the heatmap layer visualization.
Usage
<script setup lang="ts">
const heatmapData = ref([
{ lat: -34.397, lng: 150.644 },
{ lat: -34.390, lng: 150.650 },
{ lat: -34.395, lng: 150.640 },
{ lat: -34.400, lng: 150.648 },
])
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsHeatmapLayer
:options="{
data: heatmapData,
radius: 20,
}"
/>
</ScriptGoogleMaps>
</template>
Weighted Data Points
Assign different weights to data points to emphasize certain areas. Pass objects with location and weight properties instead of plain lat/lng.
<script setup lang="ts">
const weightedData = ref([
{ location: { lat: -34.397, lng: 150.644 }, weight: 5 },
{ location: { lat: -34.390, lng: 150.650 }, weight: 1 },
{ location: { lat: -34.395, lng: 150.640 }, weight: 3 },
{ location: { lat: -34.400, lng: 150.648 }, weight: 2 },
])
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsHeatmapLayer
:options="{
data: weightedData,
radius: 30,
}"
/>
</ScriptGoogleMaps>
</template>
Custom Gradient
Override the default color gradient to match your design.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsHeatmapLayer
:options="{
data: heatmapData,
radius: 25,
opacity: 0.8,
gradient: [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
],
}"
/>
</ScriptGoogleMaps>
</template>
Reactive Data
The options prop is deeply reactive. You can add or remove data points dynamically.
<script setup lang="ts">
const points = ref([
{ lat: -34.397, lng: 150.644 },
])
function addRandomPoint() {
points.value.push({
lat: -34.397 + (Math.random() - 0.5) * 0.02,
lng: 150.644 + (Math.random() - 0.5) * 0.02,
})
}
</script>
<template>
<button @click="addRandomPoint">
Add Point
</button>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsHeatmapLayer
:options="{ data: points, radius: 20 }"
/>
</ScriptGoogleMaps>
</template>
The visualization library loads automatically when this component mounts. You do not need to add 'visualization' to the libraries option in your Nuxt config.