Marker Clustering

A filterable list of markers that are clustered together using @googlemaps/markerclusterer

Filter Trees

This example uses the @googlemaps/markerclusterer library to demonstrate how to render a large dataset of markers on the map. This example also includes a filter function to show dynamic updating of the clustered markers and an InfoWindow to show details about the locations.

About

Marker Clustering requires an additional dependency @googlemaps/markerclusterer.

Installation

npm i @googlemaps/markerclusterer

SolidStart

@googlemaps/markerclusterer is a CommonJS module and may cause issues with SolidStart. To fix this, add the following to your app.config.ts:

export default defineConfig({
  ...,
  vite: {
    ssr: {
      noExternal: ['@googlemaps/markerclusterer']
    }
  }
})