Rotate SVG at the center for Google maps custom icon - svg

Question

I have this code for drawing a rotated icon on a google map:
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;
}
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.
See example:
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

Answer 1

This isn't ideal but it works okay. This is TypeScript code. You can't go back to JavaScript after writing in TypeScript, it is just too painful.
Given that pos is a LatLng:
let pos = new this.google.maps.LatLng(lat, lng);
Methods:
public createMarker(heading: number, pos: any) {
let marky = new this.google.maps.Marker({
position: pos,
map: this.google_map,
icon: {
path: this.google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
fillOpacity: 1,
fillColor: 'orange',
strokeWeight: 1.5,
scale: 2,
strokeColor: 'darkblue',
rotation: heading,
anchor: this.getRotation(heading),
},
});
return marky;
}
public createLabel(name: string, pos: any) {
let label = new MapLabel({
text: name,
position: pos,
map: this.google_map,
fontSize: 17,
fontColor: 'darkred',
align: 'center'
});
return label;
}
public getRotation(angle: number) {
if (angle <= 30) return new this.google.maps.Point(0, 5);
if (angle <= 45) return new this.google.maps.Point(0, 5);
if (angle <= 60) return new this.google.maps.Point(2, 4);
if (angle <= 120) return new this.google.maps.Point(3, 0);
if (angle <= 150) return new this.google.maps.Point(0, 0);
if (angle <= 210) return new this.google.maps.Point(0, 0);
if (angle <= 220) return new this.google.maps.Point(-1, 0);
if (angle <= 240) return new this.google.maps.Point(-3, 0);
if (angle <= 280) return new this.google.maps.Point(-3, -3);
return new this.google.maps.Point(0, 5);
}