title: Rotate SVG at the center for Google maps custom icon
body: <p>I have this code for drawing a rotated icon on a google map:</p>
  
  <pre><code>    function createMarker(device) {
          var wtf = new google.maps.Marker({
          map: window.map_,
          position: new google.maps.LatLng(device.lat, device.lng),
          icon: {
              path: 'M350,0 700,700 350,550 0,700',
              fillColor: "limegreen",
              fillOpacity: 0.8,
              scale: 0.04,
              strokeColor: 'limegreen',
              strokeWeight: 1,
              anchor: new google.maps.Point(800, 800),
              rotation: device.head,
          }
        });
        return wtf;
  }
  </code></pre>
  
  <p>The problem is the rotation rotates on one of the corners of the SVG - not the center. I found the svg path somewhere, scaled it by trial and error, and guessed at the anchor. When I add a label, instead of the label being under the icon it is all messed up. The label uses the same lat/long as the marker.</p>
  
  <p>See example:
  <a href="https://i.stack.imgur.com/6HsCp.png" rel="nofollow"><img src="https://i.stack.imgur.com/6HsCp.png" alt="enter image description here"></a></p>
  
  <p>I'm finding it impossible to get the icon to rotate "on the spot" above the label. Any ideas on how to get this to work? Thanks</p>