We have published the package under our organization since we needed support for most current Angular versions.
We will be maintaining this package in order to provide compatibility with newer Angular versions
We are not planning on adding new features to this package, and we plan to get back to the original angular google maps as soon the maintenance is reestablished on the original package
this package levereges the @google/markerclustererplus to add clustering support to AGM.
@agm/markerclusterer has a peer depedency on markerclustererplus
npm install @google/markerclustererplus @agm/markerclusterer --save
# or
yarn add @google/markerclustererplus @agm/markerclusterer
-
Add assets command to your angular.json In your
angular.json
file, go toprojects/<yourproject>/architect/build/options/assets
and add the following line:{"input": "./node_modules/@google/markerclustererplus/images", "glob": "*", "output": "/images"}
-
Import the module
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // add these imports import { AgmCoreModule } from '@agm/core'; import { AgmMarkerClustererModule } from '@agm/markerclusterer'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AgmCoreModule.forRoot({ apiKey: ['YOUR_API_KEY_HERE'] }), AgmMarkerClustererModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
use it in your template
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982"> <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"> <agm-marker [latitude]="51.673858" [longitude]="7.815982"> </agm-marker><!-- multiple markers --> </agm-marker-cluster> </agm-map>