Google Maps Draw Polygon and Calculate Area

Question

I am trying to write some code to allow a user to draw a polygon on Google Maps and then calculate the area. For some reason however the markers and polygon doesn't display when I click on the screen. Could anyone help me with this. I'm adding the code:

var measure = {
        mvcLine: new google.maps.MVCArray(),
        mvcPolygon: new google.maps.MVCArray(),
        mvcMarkers: new google.maps.MVCArray(),
        line: null,
        polygon: null
    };

    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(orgn_lattitude, orgn_longitude),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var marker = new google.maps.Marker({ position: new google.maps.LatLng(orgn_lattitude, orgn_longitude), map: map })

        google.maps.event.addListener(map, 'click', measureAdd);
    }

    function measureAdd(event) {
        // Add a draggable marker to the map where the user clicked
        var marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            draggable: true
        });

        // Add this LatLng to our line and polygon MVCArrays
        // Objects added to these MVCArrays automatically update the line and polygon shapes on the map
        measure.mvcLine.push(latLng);
        measure.mvcPolygon.push(latLng);

        // Push this marker to an MVCArray
        // This way later we can loop through the array and remove them when measuring is done
        measure.mvcMarkers.push(marker);

        // Get the index position of the LatLng we just pushed into the MVCArray
        // We'll need this later to update the MVCArray if the user moves the measure vertexes
        var latLngIndex = measure.mvcLine.getLength() - 1;

        // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
        //     LatLng at this position
        google.maps.event.addListener(marker, "drag", function (evt) {
            measure.mvcLine.setAt(latLngIndex, evt.latLng);
            measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
        });

        // When dragging has ended and there is more than one vertex, measure length, area.
        google.maps.event.addListener(marker, "dragend", function () {
            if (measure.mvcLine.getLength() > 1) {
                measureCalc();
            }
        });

        // If there is more than one vertex on the line
        if (measure.mvcLine.getLength() > 1) {

            // If the line hasn't been created yet
            if (!measure.line) {

                // Create the line (google.maps.Polyline)
                measure.line = new google.maps.Polyline({
                    map: map,
                    clickable: false,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1,
                    strokeWeight: 3,
                    path: measure.mvcLine
                });

            }

            // If there is more than two vertexes for a polygon
            if (measure.mvcPolygon.getLength() > 2) {

                // If the polygon hasn't been created yet
                if (!measure.polygon) {

                    // Create the polygon (google.maps.Polygon)
                    measure.polygon = new google.maps.Polygon({
                        clickable: false,
                        map: map,
                        fillOpacity: 0.25,
                        strokeOpacity: 0,
                        paths: measure.mvcPolygon
                    });

                }

            }

        }

        // If there's more than one vertex, measure length, area.
        if (measure.mvcLine.getLength() > 1) {
            measureCalc();
        }
    }

    function measureCalc() {

        // Use the Google Maps geometry library to measure the length of the line
        var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());

        // If we have a polygon (>2 vertexes in the mvcPolygon MVCArray)
        if (measure.mvcPolygon.getLength() > 2) {
            // Use the Google Maps geometry library to measure the area of the polygon
            var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
        }

    }

Answer 1

This is how I managed to calculate the area of a polygon once drawn on the map, with metric and imperial units.

google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
  const polyPath = polygon.getPath()
  const measurement = google.maps.geometry.spherical.computeArea(polyPath)
  const squareMeters = measurement.toFixed(2)
  const squareFeet = (squareMeters * 10.7639).toFixed(2)

  drawingManager.setDrawingMode(null)
  polygon.setOptions({ zIndex: 1 })

  google.maps.event.addListener(polygon, 'mouseover', () => {
    measurementBox.setContent(`<p>${squareFeet} sqft.<p/>`)
    measurementBox.open(map)
  })

  google.maps.event.addListener(polygon, 'mousemove', (e) => {
    measurementBox.setPosition(e.latLng)
  })

  google.maps.event.addListener(polygon, 'mouseout', () => {
    measurementBox.close()
  })
})

Answer 2

I happen to have this old demo which was made with the API version 2. You'd need to convert it to V3. Let me know if you have trouble with the conversion.

*****DEAD LINK REMOVED*****