title: Rotate Custom Marker Google Maps API
body: <p>I have been searching everywhere for something similar, but can not find anything to help. I have searched the <a href="https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol" rel="nofollow noreferrer">Google Maps API for Javscript</a> for any sort of help, however I couldn't work it out.</p>
  
  <p>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 <code>fillColor</code>, however Im sure I could figure it out if rotation isnt too different.</p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>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'}
          });
  
      };
  </code></pre>
  
  <p>EDIT:</p>
  
  <p><a href="https://jsfiddle.net/ou5gkpsh/" rel="nofollow noreferrer">HERE</a> is a jsFiddle of all the code in my project.</p>