Google Maps Generating Javascript Using Polygons

I am trying to get the Google Maps Javascript API to get points from JSON and use the computeOffset () function to calculate the points left and right so that I can plot a path using polygons. My current code seems to be creating strange shapes instead of making clean polygon connections from point to point.

I define var lastPoint to be lastPoint from a jQuery $ .each loop, so that when the query goes to the next lat lng value, the polygon will connect to the previous point. Instead of nice square polygons from point to point, I get weird shapes, mostly triangles instead of squares.

$.getJSON('sixth.json', function(data) { 
  var lastPoint;
  var myLatlng2;
  var polyShape;

  $.each( data.contactdetails, function(i, value) {
    myLatlng2 =  new google.maps.LatLng(value.lat, value.lng);

    var boomwidth = value.boomwidth;
    var bear = value.bear;
    var boomconversionfactor = 1;

//computeOffset returns a LatLng position by using the bearing and number of feet to return another location
    var point1 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
    var point2 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    var point3 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, 90 + bear);
    var point4 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);

    if (lastPoint !== undefined){
      var point1 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
      var point2 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    }

    var Coords = [point1,point2, point3, point4];

    // Construct the polygon.
    polyShape = new google.maps.Polygon({
      paths: Coords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    polyShape.setMap(map); 

//assign lastPoint the lat lng value from the jQuery loop. Trying to connect previous position to next by placing the lastPoint outside the loop.

  lastPoint = myLatlng2;

  }); //close of .each jQuery loop




 });

      

        
        
        
      

    

This is what the json contains. When I use an alert or a graph with markers, the locations are shown on the map correctly.

Json

Here's a picture. Instead of purely covering polygons, I end up with these triangular shapes.