title: How to rotate marker icon (svg image) in react google maps
body: <p>For my React app, I'm implementing Google Maps. I'm using <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer">react-google-maps</a> library for maps. I want to <strong>rotate my customize marker icon</strong>.</p>
  <p>I have an SVG file (which has multiple paths and polygon) but Google Maps required in string type only (I think they will create SVG after giving path to icon) the same problem as <a href="https://stackoverflow.com/q/46403305/9623598">link</a>.</p>
  <p><strong>I followed same ans but I'm implementing in React so I'm unable to convert that code in React.</strong></p>
  <p><em><strong>Working code in JS</strong></em></p>
  <pre><code>var measle = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      optimized: false,
      icon: {
        url: &quot;https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png&quot;,
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    })
  
  var rotationAngle = 10;
    google.maps.event.addListenerOnce(map, 'idle', function() {
      setInterval(function() {
      console.log(&quot;transform: rotate(&quot; + rotationAngle + 'deg)');  $('img[src=&quot;http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg&quot;]').css({
          'transform': 'rotate(' + rotationAngle + 'deg)',
          'transform-origin': '39px 60px'
        });
        rotationAngle += 10;
        rotationAngle %= 360;
      }, 1000);
    });
  }
  </code></pre>
  <p><em><strong>My code in React (in React Google Maps)</strong></em></p>
  <pre><code>componentWillUpdate(){
        var rotationAngle = 10;
        if(this.props.refs.map){
          setInterval(() =&gt; {
                  let img = React.createElement(&quot;img&quot;, {
                  src: &quot;../../../public/images/amb.svg&quot;,
                  style: {transform: &quot;rotate(&quot; + rotationAngle + &quot;deg)&quot;, transformOrigin: &quot;39px 60px&quot;},
                  ref: image =&gt; {
                    // this.handleSize(image);
                  }
                });
                rotationAngle += 10;
                rotationAngle %= 360;
              }, 1000);
       
        }
      }
      
      ---------------------------------------------
      &lt;GoogleMap
          defaultCenter={props.MapCenter}
          defaultZoom={15}
          ref={props.onMapMounted}
          onCenterChanged={props.onCenterChanged}
          defaultOptions={{streetViewControl: false,mapTypeControl: false,
          styles:[
        {
          &quot;featureType&quot;: &quot;poi.business&quot;,
          &quot;stylers&quot;: [
            {
              &quot;visibility&quot;: &quot;off&quot;
            }
          ]
        },
        {
          &quot;featureType&quot;: &quot;poi.park&quot;,
          &quot;elementType&quot;: &quot;labels.text&quot;,
          }}
        &gt;
        {(BStatus !== 'picked' || BStatus !== 'dropped' || BStatus !== 'completed') &amp;&amp; props.directions  &amp;&amp; &lt;DirectionsRenderer directions={props.directions} options={{suppressMarkers: true}} /&gt;}
          {props.pickupLocation &amp;&amp; 
             &lt;Marker 
             position={props.pickupLocation}
             visible={props.isShowPickMarker ? true : false}
             icon={require('../../../public/images/pick.png')}
           &gt;
           &lt;/Marker&gt;
           }  
           {props.dropoffLocation &amp;&amp; &lt;Marker
             position={props.dropoffLocation}
             visible={props.isShowDropMarker ? true : false} 
             icon={require('../../../public/images/drop.png')}
           &gt;
              &lt;/Marker&gt;
             }
          { props.waypoints &amp;&amp; &lt;Marker
              position={props.waypoints}
              visible={props.isShowDropMarker ? true : false} 
              icon = {{
                    url: require('../../../public/images/amb.svg'),
                  }}
              &gt;
              &lt;/Marker&gt;
             }
        &lt;/GoogleMap&gt;
  </code></pre>
  <p>My problem is I'm unable to set <strong>rotationAngle</strong> value to <strong>map icon</strong>.
  please help me out, I have been stuck for a long time.</p>