What method was used in Google Maps to calculate the area from LatLong?

Question

I want to know what method was used in Google Maps JS API to find the result of the computeArea() function from lat long. Can you show me the formula of computeArea()?

This for my undergraduate thesis literature.

Answer 1

You could investigate geometry library for that purpose but unfortunately no non-minified / non-obfuscated versions of Google Maps API is available.

Below is provided the similar function for computing the area (in square meters) of a polygonal area:

function computeArea(latLngs) {
    var pointsCount = latLngs.length,
            area = 0.0,
            d2r = Math.PI / 180.0,
            radius = 6378137.0,
            p1, p2;

    if (pointsCount <= 2)
        return 0;

    for (var i = 0; i < pointsCount; i++) {
        p1 = latLngs[i];
        p2 = latLngs[(i + 1) % pointsCount];
        area += ((p2.lng() - p1.lng()) * d2r) *
                (2 + Math.sin(p1.lat() * d2r) + Math.sin(p2.lat() * d2r));
    }
    area = area * radius * radius / 2.0;
    return Math.abs(area);
}

Example

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: { lat: 55.761838, lng: 37.626980 },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var coords = [
        { lat: 55.761838, lng: 37.626980 },
        { lat: 57.624476, lng: 23.997321 },
        { lat: 52.228649, lng: 21.025482 },
        { lat: 50.692479, lng: 30.645169 }
    ];

    var latLngs = coords.map(function(coord) {
        return new google.maps.LatLng(coord.lat, coord.lng);
    });

   

    
    var area = new google.maps.Polygon({
        paths: coords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    area.setMap(map);

    var areaSize = google.maps.geometry.spherical.computeArea(latLngs);
    document.getElementById('panel').innerHTML = 'google.maps.geometry.spherical.computeArea: ' + areaSize / 1000;
    var areaSizeAlt = computeArea(latLngs);
    document.getElementById('panel').innerHTML += '<br>custom computeArea: ' + areaSizeAlt / 1000;


}



function computeArea(latLngs) {
    var pointsCount = latLngs.length,
			area = 0.0,
			d2r = Math.PI / 180.0,
			radius = 6378137.0,
			p1, p2;

    if (pointsCount <= 2)
        return 0;

    for (var i = 0; i < pointsCount; i++) {
        p1 = latLngs[i];
        p2 = latLngs[(i + 1) % pointsCount];
        area += ((p2.lng() - p1.lng()) * d2r) *
                (2 + Math.sin(p1.lat() * d2r) + Math.sin(p2.lat() * d2r));
    }
    area = area * radius * radius / 2.0;
    return Math.abs(area);
}

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

#map {
    height: 100%;
}

#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="panel"></div>
<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"></script>