Rotate Map Label

[StuStirling]

Is there any way to rotate a map label?

[mludlum]

I got this to work by rotating the canvas using CSS. Search for "//rotate" in code below.

1. I'm using @rcknr's pull request: Fixes for most open issues #9
2. set default property in constructor.
3. added rotation update to redraw in changed
4. Updated draw to set transform CSS property on canvas.

MapLabel = function (opt_options) {
    if (!MapLabel.prototype.setValues) {
        for (var property in google.maps.OverlayView.prototype) {
            if (!MapLabel.prototype.hasOwnProperty(property)) {
                MapLabel.prototype[property] = google.maps.OverlayView.prototype[property];
            }
        }
    }

    this.set('align', 'center');
    this.set('fontColor', '#000000');
    this.set('fontFamily', 'Roboto,Arial,sans-serif');
    this.set('fontSize', 12);
    this.set('rotation', 0);    // rotate
    this.set('strokeColor', '#ffffff');
    this.set('strokeWeight', 1);
    this.set('zIndex', 1e3);

    this.setValues(opt_options);
}

window['MapLabel'] = MapLabel;


/** @inheritDoc */
MapLabel.prototype.changed = function (prop) {
    switch (prop) {
        case 'fontFamily':
        case 'fontSize':
        case 'fontColor':
        case 'rotation': // rotate
        case 'strokeWeight':
        case 'strokeColor':
        case 'text':
            this.drawCanvas_();
        case 'align':
        case 'maxZoom':
        case 'minZoom':
        case 'position':
            return this.draw();
    }
};

/**
 * @inheritDoc
 */
MapLabel.prototype.draw = function () {
    var projection = this.getProjection();

    if (!projection) {
        // The map projection is not ready yet so do nothing
        return;
    }

    if (!this.canvas_) {
        // onAdd has not been called yet.
        return;
    }

    var latLng = /** @type {google.maps.LatLng} */ (this.get('position'));
    if (!latLng) {
        return;
    }
    var pos = projection.fromLatLngToDivPixel(latLng);

    var style = this.canvas_.style;

    style['top'] = pos.y + 'px';
    style['transform'] = 'scale(' + this.map.getZoom() / 17 + ') rotate(' + this.get('rotation') + 'rad)'; //rotate

    switch (this.get('align')) {
        case 'left':
            style['left'] = pos.x - (this.canvas_.width / (window.devicePixelRatio ? window.devicePixelRatio : 1)) + 'px';
            style['margin-left'] = '-1em';
            style['margin-top'] = '-0.4em';
            break;
        case 'right':
            style['left'] = pos.x + 'px';
            style['margin-left'] = '1em';
            style['margin-top'] = '-0.4em';
            break;
        default:
            style['left'] = (pos.x - (this.canvas_.width / (window.devicePixelRatio ? window.devicePixelRatio : 1)) / 2) + 'px';
            style['margin-left'] = 0;
            style['margin-top'] = '1em';
    }

    style['visibility'] = this.getVisible_();
};

`