Encountering a Type Error while using Angular 8 with Google Maps for Marker Clustering: "Error - markercluster is

Currently, I am in the process of setting up Google Maps and Marker Clustering without using AGM. The map loads successfully and I have added multiple markers to it. However, when attempting to incorporate marker clusterer, I encounter a type error which states:

ERROR TypeError: "_google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ is not a constructor"

I have installed marker clusterer via npm with the following command:

npm i @google/markerclusterer --save-dev

Following that, I included the following in my component file along with other imports related to markers/clustering:

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

In my class, I implemented it as per the example provided:

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 have attempted uninstalling and reinstalling google marker clusterer and also switching to marker clusterer plus, yet the issue persists.

Answer №1

After some troubleshooting, I was able to solve the issue by modifying the import statement as shown below.

Replace the original import:

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

With this updated import:

import MarkerClusterer from '@google/markerclusterer';

Answer №2

To integrate markerclusterer into your Angular project, add the MarkerClusterer package to your build and declare it in your component file.

In the angular.json file:

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

In your component.ts file:

declare var MarkerClusterer:any;

Note: Make sure to load the Google Maps script before loading markerclusterer.js.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Javascript's ParseFloat function returns a string instead of a number

I have an array retrieved from an API that looks like this: x = [0, 12.1, 23.45, 100.23, 13.99, 90, 0, 16.1] I need each number to have a decimal point up to two places, such as 0.00 or 12.10. Here is what I tried: x = x.toFixed(x); However, this conv ...

What is the best way to enhance the appearance of labels on my Google Maps using the Google Maps API?

I've created a map that pulls data points from a json file. I've successfully displayed an image as a marker and added a label, but I'm struggling with styling the label. How can I add style to the label without affecting the map or coordina ...

Even after setting a new value to a variable in Vue, it may still reference the old

init(){ this.unsortedList = this.selectedVoucher.approvalStepList; // list in original order this.sortedList = this.unsortedList .sort(function(a,b){ if (new Date(a.createDate) < new Date(b.createDate)) return -1; ...

Partial is not accurately handled by Typescript generics

Encountered an issue with the function below when using typescript 3.7.2: function updateWithPartial <T,P extends Partial<T>, K extends keyof P> ( obj: T, part: P, key: K ) { return obj[key]=part[key] } So, if key is a keyof Partial, it ...

Retrieve the imported object by referencing the environment

Within my TypeScript Node application, I am looking to access the exported object that corresponds to my NODE_ENV variable. config.ts const test: { [index: string]: any } = { param1: "x", param2: { name: "John" } } const dev: { [index ...

Recursive array generation

Given an array 'featureList', the goal is to create a new array 'newArray' based on a specific ID. For example, for ID 5, the newArray would be ['MotherBoard','Antenna','Receiver'], where Receiver correspon ...

defineProps withDefaults "The type is lacking the following properties from the specified type"

I am currently working on a custom Button component with some unique functionality: <script lang="ts" setup> import { computed, ref } from 'vue'; const { type = 'button', color = 'primary', disabled = fa ...

Tips for handling undefined values in observable next methods to return a default error message

I sent a request over the network and received a response. Whenever I encounter an undefined value in the response, I want to return a default error message. The response may contain multiple levels of nested objects. Is there a way to replace the if else ...

What causes functions operating on mapped objects with computed keys to not correctly infer types?

If you are seeking a way to convert the keys of one object, represented as string literals, into slightly modified keys for another expected object in Typescript using template string literals, then I can help. In my version 4.9.5 implementation, I also ma ...

Leveraging CustomPipe with ngModel in Angular 7 and beyond

In my application, I am facing an issue with a date calendar picker input that is storing dates on a server and returning them onInit. The problem arises when the date is not stored or picked, as it returns 01/01/0001 numbers. My goal is to have the input ...

PostgreSQL reverse relationship

I have a table in my database called "textDate" class TextData extends BaseEntity{ id(primaryGeneratedColumn) ar:string en:string } This entity is used to store all text in my project, such as titles, descriptions, and other fields that have foreign ...

Changing the type of value in a React select onChange

<Select options={options} value={selectedBusinessList} isMulti placeholder="Select Business" onChange={(value: any) => setSelectedBusinessList(value)} onInputChange={query => { if ...

When running the 'nest build' command, a critical error occurs: 'FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory'

While my previous project works perfectly under the VS Code debugger, I am encountering issues when trying to build it from the command line. The specific error message I am receiving is: FATAL ERROR: Ineffective mark-compacts near heap limit Allocatio ...

Exploring the world of spatial objects through R

I am exploring ways to map points on Google Maps using R based on latitude and longitude coordinates. I have been following a tutorial at , specifically focusing on the second method that utilizes the "meuse" dataset. However, I am facing difficulty in co ...

Is it possible to deactivate input elements within a TypeScript file?

Is it possible to disable an HTML input element using a condition specified in a TS file? ...

Using React MUI to implement a custom Theme attribute within a component

I have a CircularProgress element that I want to center, and to make the styling reusable, I decided to create a theme.d.ts file: import { Theme, ThemeOptions } from '@mui/material/styles' declare module '@mui/material/styles' { inte ...

The 'Promise<void>' type cannot be assigned to the 'Promise<xxx>' type

Attempting the following transaction in TypeScript resulted in a compile error. The error message stated: Type 'Promise<void>' is not assignable to type 'Promise<transactionArgument>'. However, the function returns a value o ...

There seems to be an issue with compiling Typescript on a particular machine

My small project compiles perfectly on my home machine, but I encounter hundreds of errors when trying to compile it on another PC. The only noticeable difference in the environment is that the problematic PC is running Windows 8 (machines running Windows ...

Error: UserService (?) is missing parameters and cannot be resolved

Upon compiling my application, an error is appearing in the console: Uncaught Error: Can't resolve all parameters for UserService (?) Despite having @Injectable() present for the UserService, I am unsure where to troubleshoot further. import {Inj ...

Double invocation of ActivatedRoute.params.subscribe method observed

To extract URL parameters, I'm utilizing the ngOnInit() method where I've implemented the following snippet: this.activatedRoute.queryParams.subscribe(params => { console.log(params); // actual implementation here }); Yet, upon initi ...