Google Map API Rectangle Class

Question

I have a draggable rectangle on my map. If the user drags the rectangle into a square shape, I know both sides are equal. How can I determine the length of one side compared to the other? I can use getBounds and probably work something out with that but I assume there is an easier way. I don't need the actual number, I only need to know relative to each other. For example the rectangle is twice as wide as it is high, or three times as high as it is wide.

You probably need to use the [Geometry library](https://developers.google.com/maps/documentation/javascript/geometry#Distance)'s `computeDistanceBetween` function — duncan, Apr 11 '16 at 17:44
Thanks Duncan, I used computeDistanceBetween from the Most Excellent example on your blog at: [link](https://duncan99.wordpress.com/tag/google-maps-api) — user1892770, Apr 11 '16 at 18:12
How can I mark Duncan's answer as accepted? There is no check mark to click on. — user1892770, Apr 11 '16 at 18:21

duncan · Accepted Answer · 2016-04-11T19:20:12.307

Assuming you have a draggable rectangle, you could get its bounds when the user's finished dragging it. Then you could use the Geometry library to get the length of its sides. Something like:

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 90% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>
    function initialize() {
        var myOptions = {
            zoom: 14,
            center: {lat: 51.476706, lng: 0},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var rectangle = new google.maps.Rectangle({
            bounds: new google.maps.LatLngBounds(
                {lat: 51.4721885614119, lng: -0.029311180114746094}, 
                {lat: 51.48122299123414, lng: 0.029311180114746094}
            ),
            editable: true,
            map: map
        });

        rectangle.addListener('bounds_changed', function() {            
            var bounds = this.getBounds();

            var proportion = getSideProportions(bounds);

            $('#proportion').text('The width is ' + proportion + ' times the height');
        });
    }

    /* Imagine a rectangle with these corners:
    * A--B
    * |  |
    * C--D
    * PointB = the North-East corner,
    * PointC = the South-West corner
    */
    function getSideProportions(bounds) {
        var PointA, PointB, PointC, NorthEastLatitude, SouthWestLongitude, horizontalDistance, verticalDistance, proportion;

        // get the coordinates for the NE and SW corners
        PointB = bounds.getNorthEast();
        PointC = bounds.getSouthWest();

        // from that, figure out the latitudes and the longitudes
        NorthEastLatitude =  PointB.lat();

        SouthWestLongitude =  PointC.lng();

        PointA = new google.maps.LatLng(NorthEastLatitude, SouthWestLongitude);

        horizontalDistance = getDistance(PointA, PointB);
        verticalDistance = getDistance(PointA, PointC);

        proportion = horizontalDistance / verticalDistance;

        return Math.round(proportion * 10) / 10;
    }

    function getDistance(point1, point2) {
        return google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map"></div>
    <div id="proportion"></div>
</body>
</html>

Ref: https://duncan99.wordpress.com/2013/10/19/google-maps-size/

Thank You! Excellent Code. – user1892770 Apr 11 '16 at 20:59 — user1892770, Apr 11 '16 at 20:59

Google Map API Rectangle Class

1 Answers1