GBrooksy
GBrooksy

Reputation: 373

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

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.

Upvotes: 2

Views: 5761

Answers (2)

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

Add markerclusterer to angular build and declare MarkerClusterer in component file.

In angular.json

"scripts": [
    "node_modules/@google/markerclusterer/dist/markerclusterer.min.js"
 ]

In component.ts

declare var MarkerClusterer:any;

Note: Before loading markerclusterer.js make sure you load google maps script.

Upvotes: 0

GBrooksy
GBrooksy

Reputation: 373

I managed to resolve this by changing the following import.

Change this:

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

To:

import MarkerClusterer from '@google/markerclusterer';

Upvotes: 3

Related Questions