Draw a rectangle google.maps.Polygon given its center point and dimensions

Question

I am working on a PHP script which takes XML input, parses it and then displays (eventually rotated) rectangle and ellipses areas.

Because area can be rotated, I have to use google.maps.Polygon and not Rectangle.

To handle rotation I hope to use the google-maps-polygon-rotate library (that part comes later).

My problem is: from the given XML input I only know the coordinates of the rectangle centerpoint and the dimensions of the area (width and height).

Currently I just display the centerpoint as a marker:

My question is: how to draw a rectangle with google.maps.Polygon when only the latitude and longitude of the center point and the width, height are known?

I.e. how to calculate the latitude and longitude of the 4 endpoints?

Can I somehow use google.maps.geometry.spherical.computeOffset() method here?

Answer 1

One option would be to use the v3 ported version of Mike Williams' v2 Eshapes library

    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);

The function google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, defines a rectangle with sides 100000 meters x 20000 meters rotated -60 degrees, the second call defines one the same size rotated 30 degrees.

working fiddle

working snippet:

var map = null;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(44, -78),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"),
    myOptions);
    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross

google.maps.Polyline.Shape = function (point, r1, r2, r3, r4, rotation, vertexCount, colour, weight, opacity, opts, tilt) {
    if (!colour) {
        colour = "#0000FF";
    }
    if (!weight) {
        weight = 4;
    }
    if (!opacity) {
        opacity = 0.45;
    }
    var rot = -rotation * Math.PI / 180;
    var points = [];
    var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
    var step = (360 / vertexCount) || 10;

    var flop = -1;
    if (tilt) {
        var I1 = 180 / vertexCount;
    } else {
        var I1 = 0;
    }
    for (var i = I1; i <= 360.001 + I1; i += step) {
        var r1a = flop ? r1 : r3;
        var r2a = flop ? r2 : r4;
        flop = -1 - flop;
        var y = r1a * Math.cos(i * Math.PI / 180);
        var x = r2a * Math.sin(i * Math.PI / 180);
        var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
        var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

        points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
    }
    return (new google.maps.Polyline({
        path: points,
        strokeColor: colour,
        strokeWeight: weight,
        strokeOpacity: opacity
    }))
}
google.maps.Polygon.Shape = function (point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
    var rot = -rotation * Math.PI / 180;
    var points = [];
    var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
    var step = (360 / vertexCount) || 10;

    var flop = -1;
    if (tilt) {
        var I1 = 180 / vertexCount;
    } else {
        var I1 = 0;
    }
    for (var i = I1; i <= 360.001 + I1; i += step) {
        var r1a = flop ? r1 : r3;
        var r2a = flop ? r2 : r4;
        flop = -1 - flop;
        var y = r1a * Math.cos(i * Math.PI / 180);
        var x = r2a * Math.sin(i * Math.PI / 180);
        var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
        var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

        points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
    }
    return (new google.maps.Polygon({
        paths: points,
        strokeColor: strokeColour,
        strokeWeight: strokeWeight,
        strokeOpacity: Strokepacity,
        fillColor: fillColour,
        fillOpacity: fillOpacity
    }))
}

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk""></script>
<div id="map"></div>

Answer 2

My own answer (see the screenshot below) - first add the geometry library:

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry">
</script>

And then use it to create the corners of the rectangle:

var NORTH = 0;
var WEST  = -90;
var SOUTH = 180;
var EAST  = 90;

function drawRect(map, lat, lng, width, height, color) {

        var center = new google.maps.LatLng(lat, lng);

        var north = google.maps.geometry.spherical.computeOffset(center, height / 2, NORTH); 
        var south = google.maps.geometry.spherical.computeOffset(center, height / 2, SOUTH); 

        var northEast = google.maps.geometry.spherical.computeOffset(north, width / 2, EAST); 
        var northWest = google.maps.geometry.spherical.computeOffset(north, width / 2, WEST); 

        var southEast = google.maps.geometry.spherical.computeOffset(south, width / 2, EAST); 
        var southWest = google.maps.geometry.spherical.computeOffset(south, width / 2, WEST); 

        var corners = [ northEast, northWest, southWest, southEast ];

        var rect = new google.maps.Polygon({
                paths: corners,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 1,
                fillColor: color,
                fillOpacity: 0.3,
                map: map
        });
}

And to rotate the rectangle by an angle I probably could add it to the 2nd argument of the computeOffset() calls. Haven't tried that yet.