Google Maps - Rotation in Euclidean space

by Paulo Ávila

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

CSS

#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

JavaScript

window.addEventListener('load', function() {
    var polylineCenter = new google.maps.LatLng(0, 0);
    var polylineEnd = new google.maps.LatLng(30, 30);

    
    ///////////////////////////////////////////
    /**
     * Custom class for managing the nodes of a CombinedMarker
     */
    function CombinedMarkerNodes(centerMarker) {
        // the final length of the node connecting line
        this.length = 30;
        this.centerMarker = centerMarker;
        this.nodes = [];
        this.setMap(centerMarker.getMap());
    }

    // need to extend the Google Maps OverlayView Class
    // https://developers.google.com/maps/documentation/javascript/reference#OverlayView
    // and define the following functions:
    CombinedMarkerNodes.prototype = new google.maps.OverlayView();
    CombinedMarkerNodes.prototype.constructor = CombinedMarkerNodes;
    CombinedMarkerNodes.prototype.onAdd = function () { };
    CombinedMarkerNodes.prototype.draw = function () { };
    CombinedMarkerNodes.prototype.onRemove = function () { };

    // define our own functions

    // http://en.wikipedia.org/wiki/Rotation_matrix
    // http://stackoverflow.com/questions/6428192/get-new-x-y-coordinates-of-a-point-in-a-rotated-image
    CombinedMarkerNodes.prototype.rotate = function (coords, angle) {
        var rad = angle * Math.PI / 180,
            cos = Math.cos(rad),
            sin = Math.sin(rad);

        return [
            (coords[0] * cos) - (coords[1] * sin),
            (coords[0] * sin) + (coords[1] * cos)
        ];
    }

    CombinedMarkerNodes.prototype.showNodes = function () {
        var rotatedCoordLatLng,
            rotatedCoordPixels,
            centerMarkerLatLng = this.centerMarker.getPosition(),
            centerMarkerPixel = this.getProjection().fromLatLngToContainerPixel(centerMarkerLatLng);

        // center
        this.nodes[0] = {
            lat: centerMarkerLatLng.lat(),
            lng: centerMarkerLatLng.lng(),
            x:...