Angular-google-maps: Setting marker cluster icon depending on markers inside it

[OleksandrBudik]

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

[preethis610]

I am using agm-marker-cluster in angular4 application.I need to change the agm-marker-cluster image based on a variable value. imagePath is not getting updated to the assigned value. Yor help would be appreciated.

[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 } ];

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

[maksimbykov]

@lmachado-eti I did exactly as you show, but an image is absent on map and in the console shows error "undefined:1 GET http://localhost:4200/undefined 404 (Not Found)"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[AncaElena10]

GET http://localhost:4200/cluster_images/m1.png 404 (Not Found) PLEASE HELP with this. It's been 4 hours and I didn't find anything on the Internet.

var markerCluster = new MarkerClusterer( this.my_map, markers, { imagePath: 'cluster_images/m' } )

I tried with { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' } and it works ok, but with my images, it doesn't. Images are inside folder cluster_images, I have 5 files called from m1.png to m5.png, everything is OK but I get 404.

[lmachado-eti]

Hello, sorry for the late reply.

I used URL for image path, not imagePath, like this:

var markerCluster = new MarkerClusterer(map, markers, getMarkerOptions());

function getMarkerOptions(){

var style = getMarkerStyleGreen();
var mopt = {
styles: style,
minimumClusterSize: 2,
gridSize: 50,
averageCenter: false
};

}

function getMarkerStyleGreen(){
var mstl = [
{
textColor: 'white',
url: 'img/pin_green.png',
height: 50,
width: 38,
textSize: 20
}
];
return mstl;
}

On Tue, Mar 5, 2019 at 11:26 AM Moisa Anca-Elena [e-mail]
wrote:

GET http://localhost:4200/cluster_images/m1.png 404 (Not Found) PLEASE
HELP with this. It's been 4 hours and I didn't find anything on the
Internet.

var markerCluster = new MarkerClusterer( this.my_map, .markers, {
imagePath: 'cluster_images/m' } )

I tried with { imagePath: '
https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
} and it works ok, but with my images, it doesn't. Images are inside
cluster_images, I have 5 files called from m1.png to m5.png, everything is
OK but I get 404.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SebastianM/angular-google-maps/issues/1214#issuecomment-469698985,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AhUklIYUI0CHKtnmAP89wDPi7jRaJ9-Pks5vTn6IgaJpZM4QI0Qt
.

--
Leonardo Machado

Fones:

(11) 7630-9922
(11) 8868-5302

Emails:

[email protected]
[email protected]

Skype:

lmachado.eti

[loredanaPopescu]

Hello, you can use also this solution

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
    }
};