Search code examples
angulargoogle-mapsmarkerclusterer

Property 'radius' does not exist on type 'SuperClusterViewportOptions'

I'm using markerclusterer inside my project, but I do get the following error

Error: node_modules/@googlemaps/markerclusterer/dist/algorithms/superviewport.d.ts:37:28 - error TS2339: Property 'radius' does not exist on type 'SuperClusterViewportOptions'.

37     constructor({ maxZoom, radius, viewportPadding, ...options }: SuperClusterViewportOptions);

Dependencies

index.html

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

package.json

"devDependencies": {
  "@types/google.maps": "3.54.3"
},
"peerDependencies": {
  "@angular/common": ">=16.0.3",
  "@angular/core": ">=16.0.3",
  "@angular/google-maps": ">=16.0.1",
  "@angular/material": ">=16.0.1",
  "@googlemaps/js-api-loader": "1.16.2",
  "@googlemaps/markerclusterer": "2.5.1", // <-- markerclusterer
  "@megaphone/bases": ">=5.9.10",
  "@megaphone/pipes": ">=5.9.6",
  "@megaphone/geolocation": ">=5.9.2"
},

Does anyone have a workaround?

Solution
    1. Run: npm i --save-dev @types/supercluster @types/google.maps
    2. If you're using Angular, you may also need to add this to the value of the angularCompilerOptions key in your tsconfig.json file:
    "angularCompilerOptions": {
    ...
    "allowSyntheticDefaultImports": true
    ...
}

    Thx gregorgabrovsek: Response