Add some area in polygon [JavaScript:: Google Map API v3]

Question

I have some points in database that make polygon on map. i am using Google Map Api v 3. Now I am trying to add some area in polygon such as I would like to add 100m in every side of polygon and make new one on map along with the original. I tried that but it not make correctly. i add up my code here. Note 100m area is just example value

Code

$(function() {
    mapOptions = new Object();
    mapOptions.zoom=19;
    mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
    mapOptions.mapTypeId=google.maps.MapTypeId.HYBRID;
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        console.log(event.latLng);
    });
    var polypoints = "(33.575802425924934, 73.14534723758698),(33.575523088532094, 73.14514607191086),(33.57521916842187, 73.14516484737396),(33.575026983094006, 73.14519703388214),(33.575040391386565, 73.14552694559097),(33.575290679132316, 73.14581662416458),(33.57557448668024, 73.14587026834488),(33.57559906839246, 73.14569056034088),(33.57580466062044, 73.14542233943939):(33.57627171070981, 73.14412951469421),(33.575270566751, 73.14402222633362),(33.575413588027466, 73.14471960067749),(33.576504117468154, 73.14465522766113):";
    var totalBoundary = 1;
    var isGetPoly = false;
    var getClubId = 0;
    for(var x = 0; x<totalBoundary; x++) {
        var polyPoints = polypoints;
        var polygonals=polyPoints.split(":");
        for(var j = 0;j < polygonals.length;j++) {
            var points=polygonals[j].split("),");
            var latlng = [];
            var latlng1 = [];
            var leng=points.length-1;
            if(points.length>0) {
                for(var k = 0;k < points.length;k++) {
                    var latslngs=points[k].replace("(","");
                    var latslng=latslngs.replace(")","");
                    var ltslng=latslng.split(",");
                    var latPoint = ltslng[0];
                    var lngPoint = ltslng[1];
                    latlng.push(new google.maps.LatLng(latPoint,lngPoint));
                    latPoint = parseFloat(latPoint)+0.0001;
                    lngPoint = parseFloat(lngPoint)+0.0001;
                    latlng1.push(new google.maps.LatLng(latPoint,lngPoint));
                }
                var bermudaTriangle = new google.maps.Polygon({
                    paths : latlng,
                    strokeColor : "#FF0000",
                    strokeOpacity : 0.8,
                    id:"polygon_"+(j+1),
                    editable : true,
                    strokeWeight : 2,
                    fillColor : "#FF0000",
                    fillOpacity : 0.35,
                    map:map
                });
                var bermudaTriangle1 = new google.maps.Polygon({
                    paths : latlng1,
                    strokeColor : "#FFFFFF",
                    strokeOpacity : 0.8,
                    id:"polygon_"+(j+1),
                    editable : true,
                    strokeWeight : 2,
                    fillColor : "#FF0000",
                    fillOpacity : 0.35,
                    map:map
                });
            }
        }
    }
});

Demo

Answer 1

One option would be to find the center of the polygon, then place points 100m (or whatever the distance is) further from the center from each existing point.

Code (modified from this question):

function drawEdgesPoly(poly) {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 100;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  var centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  var polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(center,
      padding+google.maps.geometry.spherical.computeDistanceBetween(center,vertices.getAt(i)),
      google.maps.geometry.spherical.computeHeading(center,vertices.getAt(i)));
  }
  // render outer shape
  var outer = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

working fiddle

Another option would be to use a GIS library like JSTS. Related questions:

• How to calculate intersection area in Google Maps API with JSTS Library?
• Google Maps Polygons self intersecting detection

What you want to do is called "buffering", the JSTS Buffer Builder may do what you need.

from Buffering Polygons:

Buffering Polygon Data

GIS operations often require a point, line or polygon to be 'buffered' for analysis purposes.

The algorithm for buffering polygon data uses the same process as the line buffering algorithm, with one small difference - the polygon buffer is created on only one side of the line which defines the polygon.

The default method is to create a buffer which surrounds the polygon boundary - some GIS software packages also give an option to create a buffer that lies inside the polygon boundary.

jsfiddle with buffered polygons using JSTS

Code snippet (from the simple algorithm above, won't work for complex polygons):

var map = null;
var bounds = new google.maps.LatLngBounds();

var drawEdgesPoly = function(poly) {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 100;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  var centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  var polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(center,
      padding + google.maps.geometry.spherical.computeDistanceBetween(center, vertices.getAt(i)),
      google.maps.geometry.spherical.computeHeading(center, vertices.getAt(i)));
    bounds.extend(newPath[i]);
  }
  // render outer shape
  var outer = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
  map.fitBounds(bounds);
};

$(function() {
  mapOptions = new Object();
  mapOptions.zoom = 19;
  mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
  mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    console.log(event.latLng);
  });
  var polypoints = "(33.575802425924934, 73.14534723758698),(33.575523088532094, 73.14514607191086),(33.57521916842187, 73.14516484737396),(33.575026983094006, 73.14519703388214),(33.575040391386565, 73.14552694559097),(33.575290679132316, 73.14581662416458),(33.57557448668024, 73.14587026834488),(33.57559906839246, 73.14569056034088),(33.57580466062044, 73.14542233943939):(33.57627171070981, 73.14412951469421),(33.575270566751, 73.14402222633362),(33.575413588027466, 73.14471960067749),(33.576504117468154, 73.14465522766113)";
  var totalBoundary = 1;
  var isGetPoly = false;
  var getClubId = 0;
  for (var x = 0; x < totalBoundary; x++) {
    var polyPoints = polypoints;
    var polygonals = polyPoints.split(":");
    for (var j = 0; j < polygonals.length; j++) {
      var points = polygonals[j].split("),");
      var latlng = [];
      var latlng1 = [];
      var leng = points.length - 1;
      if (points.length > 0) {
        for (var k = 0; k < points.length; k++) {
          var latslngs = points[k].replace("(", "");
          var latslng = latslngs.replace(")", "");
          var ltslng = latslng.split(",");
          var latPoint = ltslng[0];
          var lngPoint = ltslng[1];
          latlng.push(new google.maps.LatLng(latPoint, lngPoint));
          latPoint = parseFloat(latPoint) + 0.0001;
          lngPoint = parseFloat(lngPoint) + 0.0001;
          latlng1.push(new google.maps.LatLng(latPoint, lngPoint));
        }
        var bermudaTriangle = new google.maps.Polygon({
          paths: latlng,
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          id: "polygon_" + (j + 1),
          editable: true,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map: map
        });
        drawEdgesPoly(bermudaTriangle);

        console.log(google.maps.geometry.spherical.computeArea(bermudaTriangle.getPath()));

        //console.log(latlng);
        //console.log(latlng1);
        /*if (bermudaTriangle!=null && bermudaTriangle.Contains(Mappy.standingPosition)) {
            //getClubId = data.data[x].id;
            isGetPoly = true;
            break;
        }*/
      }
    }
    if (isGetPoly === true) {
      break;
    }
  }
});

#map-canvas {
  height: 400px;
  margin: 0;
  padding: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>