Api

<ScriptGoogleMapsMarkerClusterer>

Copy for LLMs

Groups nearby markers into clusters for cleaner map visualization at lower zoom levels. Place inside a <ScriptGoogleMaps> component.

optionsOmit<MarkerClustererOptions, 'map'>

Installation

Requires the @googlemaps/markerclusterer peer dependency:

pnpm add @googlemaps/markerclusterer

Usage

Child markers register and unregister themselves automatically.

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsAdvancedMarkerElement
        v-for="location in locations"
        :key="location.id"
        :position="location.position"
      >
        <ScriptGoogleMapsInfoWindow>
          <div>{{ location.name }}</div>
        </ScriptGoogleMapsInfoWindow>
      </ScriptGoogleMapsAdvancedMarkerElement>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
Edit this page
Markdown For LLMs

<ScriptGoogleMapsInfoWindow>

Information window that automatically opens on parent marker click. Place as a child of <ScriptGoogleMapsMarker> or <ScriptGoogleMapsAdvancedMarkerElement>.

<ScriptGoogleMapsCircle>

Circular overlay on the map. Place inside a <ScriptGoogleMaps> component.