Guides

Example: Marker Clustering

Copy for LLMs
Google Maps Static Map
Marker Clustering Demo
Zoom out to see markers group into clusters. Zoom in or click a cluster to expand.

ScriptGoogleMapsMarkerClusterer groups nearby markers into clusters at lower zoom levels, reducing DOM elements and improving performance.

Installation

Requires the @googlemaps/markerclusterer peer dependency:

pnpm add @googlemaps/markerclusterer

Basic Clustering

Child markers register and unregister themselves automatically.

<script setup lang="ts">
const locations = [
  { id: 1, position: { lat: -33.8568, lng: 151.2153 }, name: 'Opera House' },
  { id: 2, position: { lat: -33.8688, lng: 151.2093 }, name: 'Town Hall' },
  { id: 3, position: { lat: -33.8708, lng: 151.2073 }, name: 'QVB' },
  { id: 4, position: { lat: -33.8615, lng: 151.2055 }, name: 'Barangaroo' },
  { id: 5, position: { lat: -33.8523, lng: 151.2108 }, name: 'Circular Quay' },
  { id: 6, position: { lat: -33.8750, lng: 151.2050 }, name: 'Darling Harbour' },
]
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.863, lng: 151.210 }" :zoom="14">
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsAdvancedMarkerElement
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      />
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>

Clustering with Info Windows

Combine clustering with info windows so users can click individual markers once they zoom in.

<script setup lang="ts">
const locations = [
  { id: 1, position: { lat: -33.8568, lng: 151.2153 }, name: 'Opera House', description: 'World-famous performing arts centre' },
  { id: 2, position: { lat: -33.8688, lng: 151.2093 }, name: 'Town Hall', description: 'Historic civic building' },
  { id: 3, position: { lat: -33.8708, lng: 151.2073 }, name: 'QVB', description: 'Romanesque Revival shopping arcade' },
  { id: 4, position: { lat: -33.8615, lng: 151.2055 }, name: 'Barangaroo', description: 'Waterfront precinct' },
  { id: 5, position: { lat: -33.8523, lng: 151.2108 }, name: 'Circular Quay', description: 'Ferry terminal and transport hub' },
]
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.863, lng: 151.210 }" :zoom="13">
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsAdvancedMarkerElement
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      >
        <ScriptGoogleMapsInfoWindow>
          <h3>{{ loc.name }}</h3>
          <p>{{ loc.description }}</p>
        </ScriptGoogleMapsInfoWindow>
      </ScriptGoogleMapsAdvancedMarkerElement>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>

Clustering with Custom Markers

Custom HTML markers cluster the same way as default pins.

<script setup lang="ts">
const listings = [
  { id: 1, position: { lat: -33.856, lng: 151.215 }, price: '$850k' },
  { id: 2, position: { lat: -33.860, lng: 151.210 }, price: '$1.2M' },
  { id: 3, position: { lat: -33.865, lng: 151.205 }, price: '$720k' },
  { id: 4, position: { lat: -33.870, lng: 151.208 }, price: '$1.5M' },
  { id: 5, position: { lat: -33.858, lng: 151.220 }, price: '$950k' },
]
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.863, lng: 151.212 }" :zoom="14">
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsAdvancedMarkerElement
        v-for="listing in listings"
        :key="listing.id"
        :position="listing.position"
      >
        <template #content>
          <div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold text-sm">
            {{ listing.price }}
          </div>
        </template>
      </ScriptGoogleMapsAdvancedMarkerElement>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
Edit this page
Markdown For LLMs

Example: Shapes & Overlays

Billing & Permissions