Calculating area of a polygon drawn on google map

area.php

<div class="controls">
  <div class="span1 four"><a id="editPoly" class="tracing-control active" title="This is the drawing/tracing tool. Work with this tool to create your outlines."><i class="fa fa-lg fa-pencil icon-pencil icon-large"></i><br>Trace</a></div>
  <div class="span1 four"><a id="moveMap" class="tracing-control" title="Click here to move the map. Or click and drag when in Tracing mode."><i class="fa fa-lg fa-arrows icon-move icon-large"></i><br>Edit</a></div>
  <div class="span1 four"> <a id="undoDrawing" class="tracing-control" title="Did your tracing not turn out? Click here to undo your last outline."><i class="fa fa-lg fa-undo icon-undo icon-large"></i><br>Undo</a>
  </div>
</div>
<?php $yard_size = $_POST['yard_size'];?>
 <input type="hidden" name="yard_size" id="yard_size" value="<?php $yard_size?>">
<div id="map" style="display: block; width: 100%; height: 500px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places,drawing,geometry&callback=initMap" async defer></script>
<script>

//select area from map using drawing tool
var drawingManager;
var all_overlays=[];
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: lat, lng: long},
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    overviewMapControl: false,
    fullscreenControl: false,
    rotateControl: false,
    scaleControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    noClear: false,
    tilt: 0
});

  var marker = new google.maps.Marker({
      position: {lat: lat, lng: long},
      map: map,
      title: 'This is your property.'
  });

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
  },
    //markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    polygonOptions: {
      fillColor: '#85c192',
      strokeColor: "#85c192",
      fillOpacity: 0.5,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
  }
});
  drawingManager.setMap(map);
function update_area(){
    area = 0;
    for (var i=0; i < all_overlays.length; i++){
        area += google.maps.geometry.spherical.computeArea(all_overlays[i].overlay.getPath());
    }
     sq_feet = area * 10.76;
}
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    all_overlays.push(event)
       
        var newShape = event.overlay;
        newShape.type = event.type;
        latlng = newShape.getPaths();
        area = 0;
       
        google.maps.event.addListener(event.overlay.getPath(), "set_at", function(g, h) {
            update_area();
        });
        google.maps.event.addListener(event.overlay.getPath(), "insert_at", function(g, h) {
            update_area();
        });
        
      });

   //Edit Shape 
      $('#moveMap').click(function(){
        drawingManager.setDrawingMode(null);
         $('#yard_size').val(sq_feet);
    });
      //Trace Shape 
      $('#editPoly').click(function(){
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
    });
      //Delete All Shapes 
      $('#undoDrawing').click(function(){
       for (var i=0; i < all_overlays.length; i++){
        all_overlays[i].overlay.setMap(null);
        }
        all_overlays = [];
        $('#yard_size').val(null);
    });
}

</script>