anchorText not allowed in markerCluster - google-maps-api-3

Question

So I'm using a custom icon for my clusters, and this causes the text to be off center. No problem, right? just use the anchorText? Well, there are problems.
let anchor: Array<number> = [9,3];
let styles = [{
url: "../../assets/img/mapIcons/clusterDot.svg",
width: 50,
height:50,
textSize:25,
textColor:"white",
anchorText: anchor,
}];
this.markerClusterer = new MarkerClusterer(this.map, this.markers, mcOptions);
So the problem is, if I use the new naming of 'AnchorText', I will get the following error (however, it will properly center my text)
Argument of type '{ maxZoom: number; styles: { url: string; width: number; height: number; textSize: number; textColor: string; anchorText: number[]; }[]; }' is not assignable to parameter of type 'MarkerClustererOptions'.
Types of property 'styles' are incompatible.
Type '{ url: string; width: number; height: number; textSize: number; textColor: string; anchorText: number[]; }[]' is not assignable to type
This error won't stop angular for displaying it properly (but I can't check in an error as it won't pass the build test)
Now, if I change it to 'anchor' (apparently the old name of the object) it will remove the error, but it won't actually center the text.
I'm using the latest version: "#googlemaps/markerclustererplus": "^1.0.3"
What is the proper way I should be doing this?
Thanks

Answer 1

So even though nobody shows using this in all the examples online, I did find this in the bitBucket. .WithDefaultStyles allows you to properly set the anchorText.
let styles = [
MarkerClusterer.withDefaultStyle({
url: "../../assets/img/mapIcons/clusterDot.svg",
width: 56,
height:56,
textSize:25,
textColor:"white",
anchorText: [-4, 0]
})]
let mcOptions = {
maxZoom:21,
styles:styles
};
this.markerClusterer = new MarkerClusterer(this.map, this.markers, mcOptions);