change colour on infoWnd close google maps api

Question

I want to my pin to change color when I click on it in google maps.

I have the below code, the color changes but I want it to revert back to the original when the infowindow is closed. see fiddle

Where am I going wrong here?

    <div id="map_canvas"></div>

    var mylatlongs = [
                        {"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
                        {"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
                        {"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
                    ];
    var infowindow = null;
    jQuery(function() {
            var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
            var mapOptions = {
                center: StartLatLng,
                streetViewControl: false,
                panControl: false,
                maxZoom:17,
                zoom : 13,
                zoomControl:true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                }
            };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
                marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
            });

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

        });
    });


    #map_canvas {
        float: left;
        height: 565px;
        width: 100%;
    }
    #content {
        min-width: 320px;
    }

Answer 1

You don't track which marker has infowindow open. One possible solution is to add global variable which will contain information about marker with opened infowindow:

var infowindow = null;
var markerRed;

And change icon to red color when marker is clicked:

    google.maps.event.addListener(marker, 'click', function() {
        if (markerRed) {
            markerRed.setIcon('https://www.google.com/mapfiles/marker.png');
        }

        infowindow.close();
        infowindow.setContent(contentString);
        infowindow.open(map,marker);
        marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
        markerRed = marker;
    });

Update: icon change on close of infowindow:

var infowindow = new google.maps.InfoWindow({
    content: ''
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
    if (markerRed) {
        markerRed.setIcon('https://www.google.com/mapfiles/marker.png');
    }
});