Marker Clusterer for AGM
this package levereges the @google/markerclustererplus to add clustering support to
AGM.
Installation
@agm/markerclusterer has a peer depedency on markerclustererplus
npm install @google/markerclustererplus @agm/markerclusterer --save
# or
yarn add @google/markerclustererplus @agm/markerclusterer
Usage
-
Add assets command to your angular.json
In your angular.json
file, go to projects/<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';
import { AgmCoreModule } from '@007.surajit2023/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>
</agm-marker-cluster>
</agm-map>