Google Maps API JavaScript - change marker icon on click

Question

I'm sorry if this is already posted but I spent at least an hour trying to find proper up to date solution.

I'm able to set custom marker image but unable to set different one for normal and for clicked state. I found. This is the code I'm using

var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 14,
                        center: center
                    });
                    var infowindow = new google.maps.InfoWindow({});
                    var marker, count;
                    for (count = 0; count < locations.length; count++) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                            map: map,
                            title: locations[count][0],
                            icon: image
                        });

                        marker.addListener("click", () => {
                            marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
                        });

                        google.maps.event.addListener(marker, 'click', (function(marker, count) {
                            return function() {
                                infowindow.setContent(locations[count][0]);
                                infowindow.open(map, marker);
                            }
                        })(marker, count));
                    }
                }

This part changes the marker icon on click, but only for the first one and it doesn't change to non-selected icon when some other marker is clicked.

 marker.addListener("click", () => {
                            marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
                        });

Answer 1

Eventually I got it figured out. This is the working code. I got PHP part for listing the locations, but this is good enough to answer the question.

var markers = [];
                        var normalIcon = '/wp-content/uploads/2020/07/Pin.svg';
                        var activeIcon = '/wp-content/uploads/2020/07/Selected.svg';

                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 14,
                            center: center
                        });
                        var infowindow = new google.maps.InfoWindow({});
                        var marker, count;
                        for (count = 0; count < locations.length; count++) {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                                map: map,
                                title: locations[count][0],
                                icon: normalIcon
                            });
                            markers.push(marker);
                            google.maps.event.addListener(marker, 'click', (function(marker, count) {
                                return function() {
                                    for (var j = 0; j < markers.length; j++) {
                                        markers[j].setIcon(normalIcon);
                                    }
                                    this.setIcon(activeIcon);
                                    infowindow.setContent(locations[count][0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, count));
                        }

Answer 2

Try to put setIcon inside google.maps.event.addListener

e.g.

google.maps.event.addListener(marker, 'click', function() {
  return function() {
    marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
  }
});