Rotate Custom Marker Google Maps API

Question

I have been searching everywhere for something similar, but can not find anything to help. I have searched the Google Maps API for Javscript for any sort of help, however I couldn't work it out.

I am looking to simply rotate the marker by +5 degrees per click, but cant seem to figure it out. I am looking to do the same by changing the fillColor , however Im sure I could figure it out if rotation isnt too different.

JAVASCRIPT:

function addMarkerUpstream() {

        var upstreamIcon = {
            path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
            fillColor: '#fbb040',
            fillOpacity: 1,
            scale: 1.5,
            strokeColor: '#000',
            strokeWeight: 0.5,
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 50),
            rotation: 0,
        }

        var marker = new google.maps.Marker({
            position: map.center,
            map: map,
            title: 'Upstream',
            draggable: true,
            icon: upstreamIcon
        });

        latLang = marker.getPosition();

        marker.setMap(map);

        //ROTATION
        $("#rotate").click(function() {
            upstreamIcon.setProperty({rotation:+5});
        });

        //FILL COLOR
        $("#fill_red").click(function() {
            upstreamIcon = { fillColor: 'red'}
        });

    };

EDIT:

HERE is a jsFiddle of all the code in my project.

Answer 1

Try this:

$("#rotate").click(function() {
    var icon = marker.getIcon();
    var rotation = icon.rotation;

    rotation += 5;

    icon.rotation = rotation;

    marker.setIcon(icon);
});

Answer 2

Try like this,

function addMarkerUpstream() {
        var rotate = 0;
        var upstreamIcon = {
            path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
            fillColor: '#fbb040',
            fillOpacity: 1,
            scale: 1.5,
            strokeColor: '#000',
            strokeWeight: 0.5,
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 50),
            rotation: rotate,
        }

        var marker = new google.maps.Marker({
            position: map.center,
            map: map,
            title: 'Upstream',
            draggable: true,
            icon: upstreamIcon
        });

        latLang = marker.getPosition();

        marker.setMap(map);

        //ROTATION
        $("#rotate").click(function() { 
        rotate = rotate + 5; 
        upstreamIcon.{ rotation: rotate }; // Try like this
        });

        //FILL COLOR
        $("#fill_red").click(function() {
            upstreamIcon = { fillColor: 'red'}
        });