How to use MarkerCluster with GoogleMap in an Angular app ?
Sep 7, 2018 · 1 min read
You use GoogleMap in a Typescript Angular App and you’d like to display marker cluster.
The wrong way:
Add script in your index.html (or angular-cli.json)
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">And use it in your component like this :
declare var MarkerClusterer: any;Why is it wrong ? Because you will load this .js file even if you don’t need it. You don’t leverage lazy loading.
The right way:
In your console
npm i @google/markerclusterer -SAnd in your component, in the method where you handle markers and clusters, just use it as it is : a class. Instanciate it.
import * as MarkerClusterer from "@google/markerclusterer"new MarkerClusterer(map, opt_markers, opt_options)