Api

<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 has deprecated HeatmapLayer (May 2025) and will remove it in May 2026. Consider using deck.gl HeatmapLayer as an alternative.

optionsOmit<google.maps.visualization.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.

Edit this page

Markdown For LLMs

The <ScriptGoogleMaps> component is a wrapper around the useScriptGoogleMaps() composable. It provides a simple way to embed Google Maps in your Nuxt app.

Renders arbitrary Vue slot content at a map lat/lng position. Unlike InfoWindow, you have full control over HTML structure and styling.