Rotating image / marker image on Google map V3

Question

How could I rotate an image (marker image) on a Google map V3?

• There is an excellent example for V2 here, exactly doing what I need. But for GMap2! They do it with a rotating canvas.
• Image rotating with JS / JQuery is frequently used, there are multiple answers about this. But how could I apply this to my maps image?
• One mentioned approach is to have different images for different angles and to switch among them - this is NOT what I want. I do not like to have so many images, I want to rotate by code.

Remark: There are similar questions, but all for V2 and not V3 (as far I can tell). I need it for V3.

Answer 1

My js class for solving this problem is:

var RotateIcon = function(options){     this.options = options || {};     this.rImg = options.img || new Image();     this.rImg.src = this.rImg.src || this.options.url || '';     this.options.width = this.options.width || this.rImg.width || 52;     this.options.height = this.options.height || this.rImg.height || 60;     var canvas = document.createElement("canvas");     canvas.width = this.options.width;     canvas.height = this.options.height;     this.context = canvas.getContext("2d");     this.canvas = canvas; }; RotateIcon.makeIcon = function(url) {     return new RotateIcon({url: url}); }; RotateIcon.prototype.setRotation = function(options){     var canvas = this.context,         angle = options.deg ? options.deg * Math.PI / 180:             options.rad,         centerX = this.options.width/2,         centerY = this.options.height/2;      canvas.clearRect(0, 0, this.options.width, this.options.height);     canvas.save();     canvas.translate(centerX, centerY);     canvas.rotate(angle);     canvas.translate(-centerX, -centerY);     canvas.drawImage(this.rImg, 0, 0);     canvas.restore();     return this; }; RotateIcon.prototype.getUrl = function(){     return this.canvas.toDataURL('image/png'); }; 

Call it like this:

var marker = new google.maps.Marker({     icon: {         url: RotateIcon             .makeIcon(                 'https://ru.gravatar.com/userimage/54712272/b8eb5f2d540a606f4a6c07c238a0bf40.png')             .setRotation({deg: 92})             .getUrl()     }}) 

See live example here http://jsfiddle.net/fe9grwdf/39/