Google Maps API rotate Rectangle

Question

I have an application which draws an array of rectangle on Google Maps using JavaScript API version 3. This works, but what I would like to do is rotate or skew each Rectangle based on user input.

Is the Rectangle object limited to horizontal/ vertical lines? The API only takes two corner points as location so I don't see any way to rotate this type of shape.

Do I in fact have to change the shape type to Polygon?

Answer 1

Do I in fact have to change the shape type to Polygon?

Yes since google.maps.Rectangle class does not support to set coordinates of the four vertices (with setBounds function it is supported to set northeast and southwest coordinates only)

The below example demonstrates how to:

• create a polygon from a rectangle object and display it on the map instead of rectangle
• rotate a polygon

Working example

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: { lat: 33.678, lng: -116.243 },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: {
            north: 33.685,
            south: 33.671,
            east: -116.224,
            west: -116.251
        }
    });

    var rectPoly = createPolygonFromRectangle(rectangle); //create a polygom from a rectangle

    rectPoly.addListener('click', function(e) {
        rotatePolygon(rectPoly,10);
    });


    document.getElementById('btnRotate').onclick = function() {
        window.setInterval(function() {
            rotatePolygon(rectPoly, 10);
        }, 500);
    };
}



function createPolygonFromRectangle(rectangle) {
    var map = rectangle.getMap();
  
    var coords = [
      { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getNorthEast().lng() },
      { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
      { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
      { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getNorthEast().lng() }
    ];

    // Construct the polygon.
    var rectPoly = new google.maps.Polygon({
        path: coords
    });
    var properties = ["strokeColor","strokeOpacity","strokeWeight","fillOpacity","fillColor"];
    //inherit rectangle properties 
    var options = {};
    properties.forEach(function(property) {
        if (rectangle.hasOwnProperty(property)) {
            options[property] = rectangle[property];
        }
    });
    rectPoly.setOptions(options);

    rectangle.setMap(null);
    rectPoly.setMap(map);
    return rectPoly;
}


function rotatePolygon(polygon,angle) {
    var map = polygon.getMap();
    var prj = map.getProjection();
    var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point

    var coords = polygon.getPath().getArray().map(function(latLng){
       var point = prj.fromLatLngToPoint(latLng);
       var rotatedLatLng =  prj.fromPointToLatLng(rotatePoint(point,origin,angle));
       return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
    });
    polygon.setPath(coords);
}

function rotatePoint(point, origin, angle) {
    var angleRad = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
        y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
    };
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<div id="floating-panel"><input type="button" id="btnRotate" value="Auto Rotate"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

JSFiddle

Answer 2

You can draw a rotating rectangle by using Polyline. Below is the sample code to draw a single line based on direction. And remaining lines you can use by adding different path. [Example]:http://jsfiddle.net/Shivprasad09/3eb9gg3v/ You can change the direction of the rectangle by changing the value of var direction in code to rotate any choice of your degree. var pathOptions = {

    geodesic: true, 
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 7 
};

var path = new google.maps.Polyline(pathOptions1);
var start_point = new google.maps.LatLng(lat, lon); 

var direction = 100;
var radius = 2000;
var end_point = new google.maps.geometry.spherical.computeOffset(start_point, radius, direction);
path.getPath().setAt(0, start_point);
path.getPath().setAt(1, end_point);

Useful Reference links Simple Polylines and [Google Map Api]:https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions