Change icon back to default state after infoWindow closed Google Maps

So my goal here is to make the icon go from the “normalIcon” state to the “activeIcon” state on button click, which it currently does. It opens an infoWindow when the pin is clicked as well. I want the icon to go back to the “normalIcon” state when the infoWindow is closed. Right now, if you click on a different location it changes the icon back to the “normalIcon” but you have clicked on another icon which is now the “activeIcon”

Here is the javascript I have:

var normalIcon = 'Pin.png';
var activeIcon = 'Selected.png';
var locations = [
  ['<div class="header">Vigor XF in Outer Richmond</div><p id="address">4046 Balboa St, San Francisco,</p><p id="address-2">CA 94121, USA</p><div id="hours">MON - THU  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      05:30–20:00</div><div id="hours">FRI        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    05:30–18:00<div><div id="hours">SAT     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  07:00–14:30</div><div id="hours">SUN    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        10:00–13:00</div><div class="row"><div class="column" id="dialog"><img src="1.png" class="image"></div><div class="column"><img src="2.png"></div><div class="column"><img src="3.png"></div><div class="column"><img src="4.png"></div></div>', 37.78, -122.49, 5],
  ['<div class="header">Lower</div><img id="myImg" src="https://www.geocodezip.net/images/snow.png" alt="Snow" style="width:100%;max-width:300px">', 37.77, -122.43, 4],
];

function initMap() {
  var map= new google.maps.Map(
    document.getElementById('map'), {
      zoom: 14,
      center: { lat:37.78, lng:-122.44 }
    });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  var markers = new Array();

     for (i = 0; i < locations.length; i++) {
       marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map,
         icon:normalIcon
       });

       google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
        infowindow.open(map, marker);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        marker.setIcon(activeIcon);
      };
    })(marker, i));
    markers.push(marker);
     }
}

I have tried using infowindow.close like so

google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
        infowindow.open(map, marker);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        marker.setIcon(activeIcon);
        infowindow.close(map, marker);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        marker.setIcon(normalIcon);
      };

but that disables it completely. I feel like I am close but not quite there. Anyone have a quick fix?

Answer

If you want the icon to change when the InfoWindow is closed, add a listener to the InfoWindow for the closeclick event:

closeclick
function()
Arguments: None
This event is fired when the close button was clicked.

google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
  marker.setIcon(normalIcon);
})

proof of concept fiddle

code snippet:

var normalIcon = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var activeIcon = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';
var locations = [
  ['<div class="header">Vigor XF in Outer Richmond</div><p id="address">4046 Balboa St, San Francisco,</p><p id="address-2">CA 94121, USA</p><div id="hours">MON - THU  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      05:30–20:00</div><div id="hours">FRI        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    05:30–18:00<div><div id="hours">SAT     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  07:00–14:30</div><div id="hours">SUN    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        10:00–13:00</div><div class="row"><div class="column" id="dialog"><img src="1.png" class="image"></div><div class="column"><img src="2.png"></div><div class="column"><img src="3.png"></div><div class="column"><img src="4.png"></div></div>', 37.78, -122.49, 5],
  ['<div class="header">Lower</div><img id="myImg" src="https://www.geocodezip.net/images/snow.png" alt="Snow" style="width:100%;max-width:300px">', 37.77, -122.43, 4],
];

function initMap() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 12,
      center: {
        lat: 37.78,
        lng: -122.44
      }
    });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  var markers = new Array();

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: normalIcon
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
        infowindow.open(map, marker);
        google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
          marker.setIcon(normalIcon);
        })
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        marker.setIcon(activeIcon);
      };
    })(marker, i));
    markers.push(marker);
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>