<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'>

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>

Edit this page

Markdown For LLMs

Renders GeoJSON data on the map using the Google Maps Data layer. Accepts a URL string or inline GeoJSON object. Place inside a <ScriptGoogleMaps> component.

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