Icon Change on click

Base for SO questions

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="results"></div>
<div id="map"></div>

CSS

#map {
    width: 450px;
    height: 400px;
}

JavaScript

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    var infoWindow = new google.maps.InfoWindow();

    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(38.713107, -90.42984),
        icon: 'https://www.google.com/mapfiles/marker_black.png'
    });

    google.maps.event.addListener(marker, 'mouseover', function () {
        infoWindow.close();
        infoWindow.setContent("content");
        infoWindow.open(map, marker);
        //Change the marker icon
        marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
    });
}

google.maps.event.addDomListener(window, 'load', initialize);