Angular 8 and Google maps with Marker clustering - Type error markercluster is not a constructor

Question

I'm trying to get started with Google Maps and Marker Clustering (natively, i.e. not using AGM). The map loads all fine and I've added several markers to the map. However when trying to add marker clusterer I get a type error. Which reads:

ERROR TypeError: "_google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ is not a constructor"

I've installed marker clusterer using npm like so:

npm i @google/markerclusterer --save-dev

Then added the following into my component at the top of the file with my other imports that handles the markers/clustering:

import * as MarkerClusterer from "@google/markerclusterer";

Then in my class I use it like the example says to:

const gmarkers = [];

            _.each(this.venueData.venues, (venue) => {
                const mPosition = new google.maps.LatLng(venue.latlng.lat, venue.latlng.lng);
                const marker = new google.maps.Marker({position: mPosition, map: this.map});

                gmarkers.push(marker);
            });

            const test = new MarkerClusterer(this.map, gmarkers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
            );

I've tried uninstalling and re-installing google marker clusterer as well as tried switching to marker clusterer plus but still the same issue.

This post might be useful for complete clustering implementation medium.com/@sunil.jadhav38/… — SUNIL JADHAV

GBrooksy GBrooksy · Accepted Answer · 2019-10-24T12:15:17

I managed to resolve this by changing the following import.

Change this:

import * as MarkerClusterer from '@google/markerclusterer';

To:

import MarkerClusterer from '@google/markerclusterer';

Angular 8 and Google maps with Marker clustering - Type error markercluster is not a constructor

2 Answers