@grupo-san-cristobal/agm-markerclusterer
v16.0.5
Published
Angular Google Maps (AGM) extension for markerclusterer support
Downloads
70
Readme
This is a fork from the original Angular google maps project from sebastian holstein,
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
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 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>