google maps api v3 rotate a polygon by certain degree - google-maps-api-3

Question

I am using google maps to allow the user to draw a polygon then using maps APIs and some sort of geometries draw the min bounded square that cover the drawn polygon at angle of 16 degree i.e. the bounded square should bound the whole polygon area AND should be rotated 16 degree with respect to y-axis.
your help is highly appreciated
Regards

Answer 1

This is a complicated problem. I can outline the steps to get you most of the way there:
Solution Outline
Get the map projection (map.getProjection()) and convert the user polygon to the point plane using projection.fromLatLngToPoint.
Rotate the user polygon -16 degrees.
Calculate your bounding square/polygon for the newly rotated user one.
Rotate your polygon by +16 degrees.
Convert your polygon vertices back to LatLng coordinates using projection.fromPointToLatLng
Resources:
Google Maps Api Projection: https://developers.google.com/maps/documentation/javascript/reference#Projection
Google Maps API Point Plane Documentation: https://developers.google.com/maps/documentation/javascript/maptypes#WorldCoordinates
Polygon transformation algorithims: http://www.kralidis.ca/gis/compcart/polytrans/

Answer 2

The following example demonstrates how to rotate a polygon (google.maps.Polygon class).
Instruction:
draw a polygon
click on the drawn polygon to rotate it
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 drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
var polygon = event.overlay;
google.maps.event.addListener(polygon, 'click', function (e) {
autoRotatePolygon(polygon, 5);
});
});
}
function autoRotatePolygon(polygon, angle) {
window.setInterval(function () {
rotatePolygon(polygon, 5);
}, 250);
}
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%;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=drawing"></script>
JSFiddle