CODEWITHSUNDEEP
javascriptangulartypescriptgoogle-maps-api-3
Jonathan
Jonathan

Reputation: 451

Marker Clusterer not a constructor

I am trying to implement Marker Clusterer in my app. I installed '@google/markerclusterer' in my project and have imported it as shown below. However, I am receiving the error: core.js:4002 ERROR TypeError: _google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ is not a constructor. I have no clue why I am getting this since it should be a constructor. Here is my code.

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

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' });
    }

Upvotes: 3

Views: 3078

Answers (3)

Muhammad Rayyan
Muhammad Rayyan

Reputation: 41

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

Use this and in your function initMap

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

Upvotes: 4

fydelio
fydelio

Reputation: 953

To make the comment from @MukulSharma more prominent. Instead of this

import * as MarketClusterer '@google/markerclusterer'

do this

import MarkerClusterer from '@google/markerclusterer'

Upvotes: 0

Thomas Cayne
Thomas Cayne

Reputation: 1485

It's a typeError. Typescript doesn't know how to locate the typings. Have your tried @types/markerclustererplus?

Whenever I install a library I always try to make sure to look for the types. And also, like Google Analytics & Googlemaps can be a pain so adding them to tsconfig.json in src/tsconfig.json helps:

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

And in a typings.d.ts file in your project root folder:

declare var MarkerClusterer: any;

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

Or put it between your

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

declare var MarkerClusterer: any;

@Component()

if you don't want to do the typings.d.ts or src/tsconfig.json. Try different options. Angular/Typescript is finicky.

Upvotes: 0

Related Questions