typescript - Angular 8 y Google Maps con agrupación de marcadores - Error de tipo markercluster no es un constructor
Estoy tratando de comenzar con Google Maps y la agrupación de marcadores (de forma nativa, es decir, sin usar AGM). El mapa se carga bien y he añadido varios marcadores al mapa. Sin embargo, al intentar agregar el agrupador de marcadores obtengo un error de tipo. Que dice:
ERROR TypeError: "_google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ no es un constructor"
He instalado el agrupador de marcadores usando npm de esta manera:
npm i @google/markerclusterer --save-dev
Luego añadí lo siguiente en mi componente en la parte superior del archivo junto con mis otras importaciones que manejan los marcadores/agrupamiento:
import * as MarkerClusterer from "@google/markerclusterer";
Luego en mi clase lo uso como dice el ejemplo:
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'}
);
He intentado desinstalar y reinstalar Google Marker Clusterer, así como también probar con Marker Clusterer Plus, pero sigo teniendo el mismo problema.
Respuesta #1
Logré resolver esto cambiando la siguiente importación.
Cambia esto:
import * as MarkerClusterer from '@google/markerclusterer';
Para :
import MarkerClusterer from '@google/markerclusterer';
Respuesta #2
Agregar MarkerClusterer a la compilación de Angular y declarar MarkerClusterer en el archivo del componente.
En angular.json
"scripts": [
"node_modules/@google/markerclusterer/dist/markerclusterer.min.js"
]
En component.ts
declare var MarkerClusterer:any;
Nota: Antes de cargar markerclusterer.js, asegúrese de cargar el script de Google Maps.
