CODEWITHSUNDEEP
javascriptgoogle-mapsgmaps.js
Mark A.
Mark A.

Reputation: 243

gmaps.js - Drawing a Polygon

I am using gmaps.js and I can draw Polygons using this code

var paths = [];
function drawPoly(p1, p2) {
  paths.push([p1, p2]);
  console.log(paths);

  oldPolygon = null;

  map.drawPolygon({
      paths: paths,
      strokeColor: '#432070',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: '#432070',
      fillOpacity: 0.6
    });
}

But my problem is that they are overlapping each other resulting to this,enter image description here

My question is how do I remove the overlapping Polygons(Old Polygons) so that the remaining Polygon will be the last generated one. I hope I explained it well. Thanks.

Upvotes: 0

Views: 748

Answers (2)

Mark A.
Mark A.

Reputation: 243

The fix to my issue was to use the map.removePolygon method:

var paths = [];
var oldPolygon;
function drawPoly(p1, p2) {
    paths.push([p1, p2]);
    console.log(paths);

    polygons = map.drawPolygon({
       paths: paths,
       strokeColor: '#432070',
       strokeOpacity: 1,
       strokeWeight: 3,
       fillColor: '#432070',
       fillOpacity: 0.6
    });

    // remove old one if exists.
    if(oldPolygon != null){
        map.removePolygon(oldPolygon);
    }

    // ... and save a reference to the new polygon for next time around.
    oldPolygon = polygons;
}

Upvotes: 1

Jop Knoppers
Jop Knoppers

Reputation: 714

If you realy want to use polylines or polygons you could use:

.setMap(Null)

You can find more about that here: https://developers.google.com/maps/documentation/javascript/examples/polyline-remove

But i think u might want to use editable polygons: https://jsfiddle.net/3L140cg3/16/

Upvotes: 0

Related Questions