Cannot instantiate Marker Clusterer as a constructor

I am facing an issue with implementing Marker Clusterer in my app. I have successfully installed '@google/markerclusterer' in my project and imported it as shown below. However, a puzzling error keeps popping up: core.js:4002 ERROR TypeError: _google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ is not a constructor. It's strange because it should be recognized as a constructor. Take a look at the code snippet where the error occurs.

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

Code snippet within initMap()

    for (var i = 0; i < features.length; i++) {

      const infowindow = new google.maps.InfoWindow({
        content: features[i].content
      });

      const marker2 = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        animation: google.maps.Animation.DROP,
        map: map
      });

      marker2.addListener('click', () => {
        marker2.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(() => {
          marker2.setAnimation(null);
        }, 1000);
        infowindow.open(map, marker2);
      });
      const markerCluster = new MarkerClusterer(map, marker2,
        { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
    }

Answer №1

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

Include the above script in your code within the function initMap.

const cluster = new markerClusterer.MarkerClusterer({ map, markers });

Answer №2

Encountering a typeError due to Typescript's inability to locate the typings required. Have you explored utilizing @types/markerclustererplus?

Whenever incorporating a new library, it is advisable to ensure availability of type definitions. Dealing with complex tools like Google Analytics and Google Maps may require adjustments in the tsconfig.json file located in src/tsconfig.json:

"types": [
  "googlemaps",
  "google.analytics",
  "node"
]

In addition, within a typings.d.ts document within your project's root directory:

declare var MarkerClusterer: any;

declare module 'google-maps' {
  export = google.maps;
}

Alternatively, include them amidst your existing code structure such as:

import { ... } from '@angular/core';

declare var MarkerClusterer: any;

@Component()

If reluctant to modify the typings.d.ts or src/tsconfig.json files directly, consider exploring alternative solutions. Angular/Typescript environments can be somewhat temperamental.

Answer №3

If we want to highlight the comment by @MukulSharma, we should make the following adjustment:

import * as MarketClusterer '@google/markerclusterer' 

can be changed to:

import MarkerClusterer from '@google/markerclusterer'

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

Using JQuery to retrieve part of a className results in a null value being returned

I am facing an issue with a piece of code in codesandbox where it returns null when I attempt to retrieve part of the className from a div using JQuery. How can I troubleshoot this and make it work? Check out the Codesandbox Example import React, { Compo ...

What is the best way to monitor changes in objects within a JavaScript array?

Currently, I am in the process of developing a Todo application using electron and Vue.js. In my project, there is an array of objects called items. Each object follows this format: {id: <Number>, item: <String>, complete: <Boolean>, ...

When using TypeScript, my sorting function returns a value of 0 for all time values

I have been trying to sort this JSON data by date using the provided code, but it does not seem to work as expected. Below is a snippet of my JSON: { "StatusCode":0, "StatusMessage":"OK", "StatusDescription":[ { "id":"1", ...

Is it necessary to use useCallback when executing a function from a child component?

Consideration should be given to using useCallback when ensuring referential equality during parent component renders. However, it's unclear if this is necessary in a scenario where the parent is dealing with a child function. import { ReactNode, useC ...

Using TypeScript generics to define function parameters

I'm currently working on opening a typescript method that utilizes generics. The scenario involves an object with different methods, each with specified types for function parameters. const emailTypes = { confirmEmail: generateConfirmEmailOptions, / ...

Assign a value to a variable within an asynchronous function

Initially, I understand that initializing variables inside asynchronous functions is not a feasible approach. However, I require assistance in rectifying this issue. In the following example, I have an observable and aim to extract its variable for use i ...

The anchor tag seems to be malfunctioning within the div container

<style type="text/css> .xyz { position: absolute; top: 120px; left: 160px; z-index: -1; } #container { position: relative; overflow: visible; opacity: .3; } </style> <body> <div> <video i ...

Adding additional functionalities to ng-blur within the controller: A step-by-step guide

I am seeking to enhance the functionality of ng-blur for all input and textarea fields by adding a new function. These elements already have an existing ng-blur defined in the HTML, and my goal is to incorporate a new function into this existing setup from ...

Utilize web workers for efficient processing of a limited number of files simultaneously in JavaScript

Utilizing the web worker concept for file uploads has resulted in creating a web worker for each selected file. The idea now is to optimize this process by creating 5 web worker threads to handle the first batch of five files, terminating them afterwards b ...

Tips for displaying data by pivoting on a column value within a table using Angular's mat-table feature

I am working with a dataset that resembles the sample data provided below: [{ "testDisplayName": "Test_Name_1", "data": { "metrics": [ { "metricValue": -0.18, ...

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

I am dealing with a dropdown menu as shown below. <select name="slt"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="3">Three +</option&g ...

The error message "TextEncoder is not defined with mongodb nodes" is indicating that there is

Encountering an issue while running jest test cases: Getting the error message - ReferenceError: TextEncoder is not defined. Current Node version being used is 14.18.0. Mongodb NPM package version is 4.1.3. Typescript version installed is 4.4.3. Here ...

Utilizing variable values in Google Charts with AngularJS

Hello everyone, I am attempting to display a chart using data obtained from an API. The output of the API is in the form of List<String> and not in JSON format. Here is the snippet of my JS file: google.load('visualization', '1', ...

Disable the submit form in AngularJS when the start date and end date are not valid

I want to ensure that my form submission only occurs if the validation for Start date-End date passes. In my form setup, I have the following elements... <form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> <input t ...

"AngularJS Bi-Directional Data Binding Issue: Unexpected 'Undefined

Recently, I've been tackling a project that involves using a directive. Initially, everything was smooth sailing as I had my directive set up to bind to ngModel. However, I hit a roadblock when I needed to bind multiple values. Upon making the necessa ...

Exploring, navigating, and cycling through JSON in Node.js

I'm currently attempting to extract the titles of front page articles from Reddit's RSS feed and running into some issues. Below is the snippet of code I am working with: //var util = require('util'); //var cheerio = require('chee ...

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Here is the current structure I'm working with: https://i.sstatic.net/TejbU.png I want to figure out how to eliminate any field that has the id 3Q41X2tKUMUmiDjXL1BJon70l8n2 from all subjects. Is there a way to achieve this efficiently? admin.databa ...

The checkbox component is currently not displaying on the ngx-datatable

The following HTML code snippet demonstrates a sample layout. The operations are functioning correctly, however, the checkbox is not visible. <ngx-datatable style="width: 90%" class="material" [rows]="rows" ...

Utilizing the power of jQuery within three.js

Thank you once again for your previous assistance, but I find myself in need of your expertise once more. I have successfully added markers to my map as desired. However, these markers now require functionality to be clickable. Specifically, when clicked, ...