Setting marker cluster icon depending on markers inside it

Issue description

I have to set marker cluster icon depending on markers inside it. If at least one object in cluster has value isOpened === true then we use icon1.png else we use icon2.png

Steps to reproduce and a minimal demo of the problem

<agm-marker-cluster [imagePath]="'assets/m'" [averageCenter]="true"
  [styles]="[{url: 'assets/m1.png', textColor: '#fff', textSize: '20', height: '50', width: '50'}, {url: 'assets/m2.png', textColor: '#fff', textSize: '20', height: '50', width: '50'}, {url: 'assets/m3.png', textColor: '#fff', textSize: '20', height: '50', width: '50'}, {url: 'assets/m4.png', textColor: '#fff', textSize: '20', height: '50', width: '50'}, {url: 'assets/m5.png', textColor: '#fff', textSize: '20', height: '50', width: '50'}]" >
    <agm-marker *ngFor="let place of places" [latitude]="place.location ? place.location.lat : ''"
      [longitude]="place.location ? place.location.lng : ''" [iconUrl]="place.icon">

Current behavior

I want to use function setCalculator() as supposed here https://stackoverflow.com/questions/27375173/markerclusterer-set-marker-cluster-icon-depending-on-markers-inside-it but can’t find a way to do this.

Expected/desired behavior

solution to solve the problem

angular2 & angular-google-maps version

“@agm/core”: “^1.0.0-beta.0”, “@agm/js-marker-clusterer”: “^1.0.0-beta.1”, “@agm/snazzy-info-window”: “^1.0.0-beta.1”, “@angular/cli”: “^1.4.7”, “@angular/common”: “^4.4.5”, “@angular/compiler”: “^4.4.5”, “@angular/compiler-cli”: “^4.4.5”, “@angular/core”: “^4.4.5”,

Other information

[lmachado-eti]

Based on the date of your question, I believe you have solve the issue.

If you solve, can you post the solution?

Anyway, some help:

1. Declare an array of ClusterStyle

   clusterStyles: ClusterStyle[] =  [
       {
           textColor: "#FFFFFF",
           url: "assets/markers/marker_duascores_gb.png",
           height: 36,
           width: 58
       },
       {
           textColor: "#FFFFFF",
           url: "assets/markers/marker_duascores_rg.png",
           height: 36,
           width: 58
       }
   ];

1. Use the directive. <agm-marker-cluster [styles]="clusterStyles">

[alextanasie]

Hello, you can use also this solution

<agm-marker-cluster [styles]=“mapOptions.styles” [calculator]=“mapOptions.calculator”>

mapOptions = {

	styles: [{
		height: 53,
		url: "assets/map-machine-icons/green.png",
		width: 52
	},
	{
		height: 53,
		url: "assets/map-machine-icons/red.png",
		width: 52
	}],
	calculator: (markers) => {
		for (let i = 0; i < markers.length; i++) {
			// you have access all the markers from each cluster
		}
		return { text: markers.length, index: 1 };

		// index: 1 -> for green icon
		// index: 2 -> for red icon
	}
};

Unfortunately in the calculator you do not have access to any data about the marker (like id, name etc - anything that you set on the marker object) except for title and metadata like position, draggable, position etc.