When I rotate a rectangle, it's no longer rectangular

[duncancumming]

Creating a rectangular polygon. Rotating it a few degrees, it loses its rectangular shape (i.e. 90-degree corners), and the lengths of the edges change. Rotating it a full 90 degrees does give a rectangular shape, but not the same as the original one.

    function initialize() {
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 17,
            center: {lat: 51.44046, lng: -0.242711},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var from = new google.maps.LatLng(51.441583, -0.241638);
        var to   = new google.maps.LatLng(51.439537, -0.243098);

        addPolygon(from, to, map, 0);
        addPolygon(from, to, map, 10);
        addPolygon(from, to, map, 20);      
        addPolygon(from, to, map, 30);
        addPolygon(from, to, map, 40);
        addPolygon(from, to, map, 50);
        addPolygon(from, to, map, 60);
        addPolygon(from, to, map, 70);
        addPolygon(from, to, map, 80);
        addPolygon(from, to, map, 90);      
    }

    function addPolygon(from, to, map, degrees) {
        var polygon = new google.maps.Polygon({
            paths: [
                new google.maps.LatLng(from.lat(), to.lng()),
                to,
                new google.maps.LatLng(to.lat(), from.lng()),
                from
            ],
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#FF0000',
            fillOpacity: 0.05
        });

        polygon.rotate(degrees, polygon.getCenter());

        polygon.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

[davemackintosh]

+1 for this issue.

[samgclarke]

Yes, also experiencing this. When a square is rotated 90, the shape changes.

[ahmadnassri]

sorry for the late reply, somehow I wasn't getting notified of issues on this project.

[ahmadnassri]

@samgclarke @davemackintosh @duncancumming recent release 1.1.0 includes PR by @birmacher that fixes this issue.

note: you must ensure/wait for Google Maps's event projection_changed is fired before attempting any rotation:

google.maps.event.addListenerOnce(map, 'projection_changed', function() {
...
});