{"id":13880839,"url":"https://github.com/googlemaps/js-markerclusterer","last_synced_at":"2025-05-14T15:07:07.262Z","repository":{"id":37267816,"uuid":"411382178","full_name":"googlemaps/js-markerclusterer","owner":"googlemaps","description":"Create and manage clusters for large amounts of markers","archived":false,"fork":false,"pushed_at":"2025-05-05T21:04:25.000Z","size":11155,"stargazers_count":257,"open_issues_count":74,"forks_count":92,"subscribers_count":27,"default_branch":"main","last_synced_at":"2025-05-05T22:19:58.921Z","etag":null,"topics":["clustering","google","google-maps","googlemaps","javascript","maps","marker-clustering","markers","utility-library"],"latest_commit_sha":null,"homepage":"https://googlemaps.github.io/js-markerclusterer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlemaps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-28T17:41:53.000Z","updated_at":"2025-05-05T21:01:13.000Z","dependencies_parsed_at":"2023-02-19T11:45:26.302Z","dependency_job_id":"638d96f1-d94f-4508-9a83-8084ee03af7a","html_url":"https://github.com/googlemaps/js-markerclusterer","commit_stats":{"total_commits":707,"total_committers":17,"mean_commits":"41.588235294117645","dds":"0.22206506364922207","last_synced_commit":"080e58d76ed6716f82f71a74edf76e0d65229c45"},"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Fjs-markerclusterer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Fjs-markerclusterer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Fjs-markerclusterer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Fjs-markerclusterer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlemaps","download_url":"https://codeload.github.com/googlemaps/js-markerclusterer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169455,"owners_count":22026212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clustering","google","google-maps","googlemaps","javascript","maps","marker-clustering","markers","utility-library"],"created_at":"2024-08-06T08:03:32.122Z","updated_at":"2025-05-14T15:07:07.243Z","avatar_url":"https://github.com/googlemaps.png","language":"TypeScript","readme":"[![npm](https://img.shields.io/npm/v/@googlemaps/markerclusterer)][npm-pkg]\n![Release](https://github.com/googlemaps/js-markerclusterer/workflows/Release/badge.svg)\n![Stable](https://img.shields.io/badge/stability-stable-green)\n[![Tests/Build](https://github.com/googlemaps/js-markerclusterer/actions/workflows/test.yml/badge.svg)](https://github.com/googlemaps/js-markerclusterer/actions/workflows/test.yml)\n\n[![codecov](https://codecov.io/gh/googlemaps/js-markerclusterer/branch/main/graph/badge.svg)](https://codecov.io/gh/googlemaps/js-markerclusterer)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![solidarity](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat.png)](https://github.com/apps/in-solidarity)\n\n![Contributors](https://img.shields.io/github/contributors/googlemaps/js-markerclusterer?color=green)\n[![License](https://img.shields.io/github/license/googlemaps/js-markerclusterer?color=blue)][license]\n[![StackOverflow](https://img.shields.io/stackexchange/stackoverflow/t/google-maps?color=orange\u0026label=google-maps\u0026logo=stackoverflow)](https://stackoverflow.com/questions/tagged/google-maps)\n[![Discord](https://img.shields.io/discord/676948200904589322?color=6A7EC2\u0026logo=discord\u0026logoColor=ffffff)][Discord server]\n\n# Google Maps JavaScript MarkerClusterer\n\n## Description\n\nThe library creates and manages per-zoom-level clusters for large amounts of markers.\n\n[**Try the demo**](https://googlemaps.github.io/js-markerclusterer/public/defaults/)\n\n![screenshot](https://user-images.githubusercontent.com/3392975/135143029-20abd824-0f3e-4e28-bad3-327acf7aec04.png)\n\nSee the [history section](#history) and [migration section](#migration) for how this library relates to [@google/markerclusterer][@google/markerclusterer] and [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus].\n\n## Requirements\n\n- [Sign up with Google Maps Platform]\n- A Google Maps Platform [project] with the [**Maps Javascript API**][maps-sdk] enabled\n- An [API key] associated with the project above\n- [@googlemaps/markerclusterer NPM package][npm-pkg]\n\n## Installation\n\nInstall the [@googlemaps/markerclusterer NPM package][npm-pkg] with:\n\n```\nnpm i @googlemaps/markerclusterer\n```\n\nAlternativly you may add the umd package directly to the html document using the unpkg link.\n\n```html\n\u003cscript src=\"https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\nWhen adding via unpkg, the `MarkerClusterer` can be accessed at `markerClusterer.MarkerClusterer`.\n\n#### TypeScript\n\nThis library uses the official TypeScript typings for Google Maps Platform, [@types/google.maps](https://npmjs.com/package/@types/google.maps).\n\n```sh\nnpm i -D @types/google.maps\n```\n\n## Documentation\n\nThe [documentation] is generated from the TypeScript definitions.\n\n## Usage\n\n### Examples\n\n```js\nimport { MarkerClusterer } from \"@googlemaps/markerclusterer\";\n\n// use default algorithm and renderer\nconst markerCluster = new MarkerClusterer({ map, markers });\n```\n\nTo run the examples:\n- Install dependencies: ```npm install```\n- Start the development server in the root folder: ```npm run dev```\n- Navigate to [http://localhost:8080/](http://localhost:8080/) in your web browser.\n- Provide a valid Google Maps Platform API key.\n\nExamples details:\n\n- [Algorithm Comparisons](https://googlemaps.github.io/js-markerclusterer/public/algorithms) - This example demonstrates the different algorithms. Please note that spacing and many other options can be changed for each algorithm.\n\n- [Renderer Usage](https://googlemaps.github.io/js-markerclusterer/public/renderers) - This example demonstrates different renderers similar to the image below.\n\n![Screen Shot 2021-09-28 at 1 41 06 PM](https://user-images.githubusercontent.com/3392975/135154898-a5abb5a4-3022-44e0-92d2-5dcefa247e87.png)\n\n## History\n\nThis library has a heritage in [@google/markerclusterer][@google/markerclusterer] and [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus], originally made available on [code.google.com](https://code.google.com/archive/) and then transferred to GitHub at https://github.com/googlemaps/v3-utility-library. The following is an approximate timeline.\n\n- 201X - [@google/markerclusterer][@google/markerclusterer] was created.\n- 201X - [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus] was created.\n- 2019 - Libraries were published to NPM.\n- 2019 - [@google/markerclusterer][@google/markerclusterer] was deprecated for [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus].\n- 2020 - [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus] was refactored to TypeScript.\n- 2020 - [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus] was moved to a separate repository.\n- 2021 - [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus] was rewritten as [@googlemaps/markerclusterer (**new**)][@googlemaps/markerclusterer].\n- TBD - [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus] is deprecated for [@googlemaps/markerclusterer (**new**)][@googlemaps/markerclusterer].\n\n## Migration\n\nThe API of [@googlemaps/markerclusterer][@googlemaps/markerclusterer] has changed in a number of ways from [@googlemaps/markerclustererplus][@googlemaps/markerclustererplus].\n\n- The `MarkerClusterer` class now accepts an `algorithm` and `renderer` parameter to allow for more flexibility. The interface looks like the following:\n\n```js\n{\n    algorithm?: Algorithm;\n    map?: google.maps.Map;\n    markers?: google.maps.Marker[];\n    renderer?: Renderer;\n    onClusterClick?: onClusterClickHandler;\n  }\n```\n\n- The `MarkerClusterer` accepts a single options argument instead of positional parameters.\n- The traditional `GridAlgorithm` is still supported, **but is not the default**. The default is [supercluster](https://npmjs.com/package/supercluster) which uses [k-d trees](https://en.wikipedia.org/wiki/K-d_tree) for improved performance.\n- Styling of clusters has been simplifed and moved to the renderer interface.\n- The `MarkerClusterer` class is still an instance of `google.maps.OverlayView`, but uses `google.maps.Marker`s instead of `google.maps.Overlay` to render the clusters. This solves issues related to the usage of map panes and click handlers.\n- @googlemaps/markerclusterer supports Marker and Map [a11y improvements](https://cloud.google.com/blog/products/maps-platform/improved-accessibility-maps-javascript-api).\n\n## Contributing\n\nContributions are welcome and encouraged! If you'd like to contribute, send us a [pull request] and refer to our [code of conduct] and [contributing guide].\n\n## Terms of Service\n\nThis library uses Google Maps Platform services. Use of Google Maps Platform services through this library is subject to the Google Maps Platform [Terms of Service].\n\nThis library is not a Google Maps Platform Core Service. Therefore, the Google Maps Platform Terms of Service (e.g. Technical Support Services, Service Level Agreements, and Deprecation Policy) do not apply to the code in this library.\n\n## Support\n\nThis library is offered via an open source [license]. It is not governed by the Google Maps Platform Support [Technical Support Services Guidelines, the SLA, or the [Deprecation Policy]. However, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service.\n\nThis library adheres to [semantic versioning] to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time.\n\nIf you find a bug, or have a feature request, please [file an issue] on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our [developer community channels]. If you'd like to contribute, please check the [contributing guide].\n\nYou can also discuss this library on our [Discord server].\n\n[@googlemaps/markerclustererplus]: https://npmjs.com/package/@googlemaps/markerclustererplus\n[@google/markerclusterer]: https://npmjs.com/package/@google/markerclusterer\n\n[API key]: https://developers.google.com/maps/documentation/javascript/get-api-key\n[maps-sdk]: https://developers.google.com/maps/documentation/javascript\n[documentation]: https://googlemaps.github.io/js-markerclusterer\n[npm-pkg]: https://npmjs.com/package/@googlemaps/markerclusterer\n\n[code of conduct]: ?tab=coc-ov-file#readme\n[contributing guide]: CONTRIBUTING.md\n[Deprecation Policy]: https://cloud.google.com/maps-platform/terms\n[developer community channels]: https://developers.google.com/maps/developer-community\n[Discord server]: https://discord.gg/hYsWbmk\n[file an issue]: https://github.com/googlemaps/js-markerclusterer/issues/new/choose\n[license]: LICENSE\n[project]: https://developers.google.com/maps/documentation/javascript/cloud-setup#enabling-apis\n[pull request]: https://github.com/googlemaps/js-markerclusterer/compare\n[semantic versioning]: https://semver.org\n[Sign up with Google Maps Platform]: https://console.cloud.google.com/google/maps-apis/start\n[similar inquiry]: https://github.com/googlemaps/js-markerclusterer/issues\n[SLA]: https://cloud.google.com/maps-platform/terms/sla\n[Technical Support Services Guidelines]: https://cloud.google.com/maps-platform/terms/tssg\n[Terms of Service]: https://cloud.google.com/maps-platform/terms\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Fjs-markerclusterer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglemaps%2Fjs-markerclusterer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Fjs-markerclusterer/lists"}