Markerclusterer: Property 'radius' does not exist on type 'SuperClusterViewportOptions'.

[adamperea]

Hello,

I have this error since the last update:
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);.

My packages versions are:

• "@googlemaps/markerclusterer": "^2.4.0"
• "@types/google.maps": "^3.53.6".

I am using Angular 16.2.0 with typescript 5.1.6. The only place where I am using something from this class is there:
new MarkerClusterer({ map: this.map, algorithm: new SuperClusterAlgorithm({ minPoints: 6 }), });

Could you help me, please?

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

@adamperea Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[carjimfa]

It also happens to me in a project with Angular 15, TypeScript 4.9.4.

[nikunjgadhiya-rishabh]

The same happens in my project.

Angular 11.0.2
Typescript 4.0.5

"@googlemaps/markerclusterer": "^2.3.2"
"@types/google.maps": "^3.53.5"

[luciendub]

Same issue in a Ionic Angular project.

[ryandan29]

The same happens in my project.

[usefulthink]

Can someone provide a minimal reproducible example? Does this only happen in combination with angular?

[jcompagner]

for me it is the same thing. but not sure that this has anything todo with angular (at least from first sight, this seems to be pure typescript)

for example:

that also fails for me because SuperClusterViewportOptions has through 2 interfaces 2 properties..

viewportPadding because of ViewportAlgorithmOptions and maxZoom because of AlgorithmOptions interfaces

not sure what this interface:

export type SuperClusterOptions = SuperCluster.Options<{
[name: string]: any;
}, {
[name: string]: any;
}>;

really does..
because SuperClusterViewportOptions also extends SuperClusterOptions
and this is assignable:

const y: SuperClusterOptions = {maxZoom, radix, viewportPadding};

but not that the completion if "y" then gives me anything..

So not sure what should be happening here.. should it be because of SuperClusterViewportOptions is also a SuperClusterOptions it should just allow everything? but it doesn't seem to do that because it also implements another interface that only defined 2 option properties (through its interface inheritance chain)

[jcompagner]

this is just weird.. i will try to make my sample smaller

but "a" is correct "radius" is not part of that because ViewportAlgorithmOptions doesn't have that

"b" is weird that it doesn't complain on anything because "b" should just be "d" which is the same type but then directly in code, and in "d" you see that it only accepts maxZoom and radius because supercluster.Options has those

And "c" is just the combination of the types of "a" and "b" (and b being kind of "d" type)

so you would expect that "c" would allow what "a" and "b" gives you but it doesn't it only seems to be the same as "a"

So 2 things:

1> why isn't "b" complaining the same as "d" because they should be effectively be the same.

2> why is "c" not a combination of "a" and "b" (or "d") and accepts it all properties that are in that combination..

[jm-ds]

Same error. It's occuring on import. import { MarkerClusterer } from "@googlemaps/markerclusterer";
Angular 16.2.0 with typescript 5.1.6.
"@angular/google-maps": "^16.2.1",
@googlemaps/markerclusterer": "^2.5.0",

[jcompagner]

this is very weird and i dont know which setting it is exactly

root package.json file

{
  "dependencies": {
    "@angular/core": "^16.2.9",
    "@googlemaps/markerclusterer": "^2.5.0"
  },
  "devDependencies": {
    "@angular/cli": "^16.2.6",
    "@types/google.maps": "^3.54.3",
    "@types/node": "^20.8.5",
    "@types/supercluster": "^7.1.1",
    "tslib": "^2.6.2",
    "typescript": "<5.2"
  }
}

in a "src" sub dir i have this test.ts:

import { SuperClusterOptions, SuperClusterViewportOptions, ViewportAlgorithmOptions} from "@googlemaps/markerclusterer";

class test {
    constructor() {
        
        const radius = 42;
        const maxZoom = 1;
        const viewportPadding = 1;
        const a: ViewportAlgorithmOptions  = {maxZoom, radius, viewportPadding};

        const b: SuperClusterOptions = {maxZoom, radius, viewportPadding};

        const c: SuperClusterViewportOptions = {maxZoom, viewportPadding, radius};
        
        const d: supercluster.Options<{
            [name: string]: any;
        }, {
            [name: string]: any;
        }> =  {maxZoom, radius, viewportPadding};
    }
}

then the errors are correct it generates errors where it should be and there are no errors where it shouldn't be.

then i just drop 1 empty file besides the package.json:

tsconfig.json which just {} inside it

and right away it goes wrong...

So it seems that suddenly even without nothing in the tsconfig.json file there are different kind of defaults that are causing this or some other thing that i don;t understand yet.

The thing is that all angular applications do have tsconfig.json files...

[Guilherme-Bodart]

I literally removed this radius from the file '@googlemaps\markerclusterer\dist\algorithms\superviewport.d.ts', where it is called, on line 37, and it worked, I don't even want to know what happens now.


This is what we call the 'Jeitinho Brasileiro' or 'Gambiarra'

[jm-ds]

I don't even want to know what happens now.

@Guilherme-Bodart You likely just created a black hole that will devour all of humanity, right before Halloween. Good job! :)

[GuilhermeBodart]

@Guilherme-Bodart You likely just created a black hole that will devour all of humanity, right before Halloween. Good job! :)

I went back to version 2.3.2, and it worked, if one day it works again from version 2.4.0+, someone please let me know 😊

[RomanTikhonov]

I have the same problem 😢

[jm-ds]

2.5.1 still broken. I reverted to 2.3.2 as @Guilherme-Bodart suggested and will also stay there until this is fixed.

[dreamer-fox]

can you help me provide your related versions，I reverted to 2.3.2 but still failed; thank you! @Guilherme-Bodart

[GuilhermeBodart]

can you help me provide your related versions，I reverted to 2.3.2 but still failed; thank you! @Guilherme-Bodart

"@angular/cli": "^16.2.0",
"@googlemaps/js-api-loader": "^1.16.2",
"@googlemaps/markerclusterer": "^2.3.2",
"@types/google.maps": "^3.54.7",

My versions Angular-cli and Google things I use, the error that happens on yours after updating still about radius?

i'm brazilian guy using translate 😊

[HelenKissopoda]

I reverted to 2.3.2 and it works for me also