How to remove maplabel library and polygon in Google Map API

Question

I'm using google maps API to allow the user draw polygons and display the length of every single border using maplabel library. But I have a problem when removing polygon and map label, I don't know how to remove them from Google Map.

My code looks like this:

HTML

<button id="enablePolygon">draw</button>
<button id="removePolygon">remove</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/maplabel.js"></script>

JS

var labels = [];
var allOverlays = [];

function setSelection(shape) {
  selectedShape = shape;
  shape.setEditable(true);
}

function initMap() {
  var options = {
    zoom: 14,
    center: {
      lat: 52.250618,
      lng: 20.9774
    }
  };

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    polygonOptions: {
      draggable: false,
      fillColor: "#0e97fa",
      fillOpacity: 0.2,
      strokeWeight: 2,
      strokeColor: "#0e97fa",
      editable: true,
      zIndex: 1
    },
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: 
      [
        google.maps.drawing.OverlayType.POLYGON,
                /* google.maps.drawing.OverlayType.POLYLINE, */
      ]
    },
    map: map,
    drawingMode: 'polygon'
  });

  
  function attachPolygonInfoWindow(polygon) {
    if (!polygon.labels) polygon.labels = [];
    for (var i = 0; i < polygon.labels.length; i++) {
      polygon.labels[i].setMap(null);
    }
    polygon.labels = [];
    var path = polygon.getPath();
    var points = path.getArray();
    var area = google.maps.geometry.spherical
      .computeArea(path.getArray())
      .toFixed(0);
    var bounds = new google.maps.LatLngBounds();
    var i;

    for (i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
    }

    var boundsCenter = bounds.getCenter();
    var centerLabel = new MapLabel({
      map: map,
      position: boundsCenter,
      fontSize: 14,
      align: "center",
      zIndex: 3
    });
    polygon.labels.push(centerLabel);

    centerLabel.set("position", bounds.getCenter());
    centerLabel.set("text", area + " m2");
    if (path.getLength() < 2) return;
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      // for each side in path, compute center and length
      var start = polygon.getPath().getAt(i);
      var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
      var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
      console.log(sideLength)
      var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
     /*  console.log("sideCenter=" + sideCenter.toUrlValue(6)); */
      var sideLabel = new MapLabel({
        map: map,
        fontSize: 14,
        align: "center",
        zIndex: 3
      });
      sideLabel.set("position", sideCenter);
      sideLabel.set("text", sideLength.toFixed(2) + "m");
      polygon.labels.push(sideLabel);
    }
  }

  function removePolygonInfoWindow() {
    for (var i = 0; i < labels.length; i++) {
      labels[i].setMap(null);
    }
    labels = [];
  }

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
    allOverlays.push(e);

    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      drawingManager.setDrawingMode(null);

      var newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, "click", function() {
        setSelection(newShape);
      });

      if (newShape.type == "polygon") {
        var path = newShape.getPath();

        google.maps.event.addListener(path, "insert_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        google.maps.event.addListener(path, "set_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        attachPolygonInfoWindow(newShape);
      }

      setSelection(newShape);
    }
  });

 var enablePolygon = document.getElementById('enablePolygon');
 enablePolygon.addEventListener('click', function(){
    drawingManager.setMap(map);
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

 var removePolygon = document.getElementById('removePolygon');
 removePolygon.addEventListener('click', function(){
    selectedShape.setMap(null);
      drawingManager.setMap(null);
      centerLabel.setRemoveLabel(true);
  });
}

initMap();

Here is demo

Answer 1

I get a javascript error with the posted code: Uncaught ReferenceError: centerLabel is not defined. Not sure why you are using that variable, you are saving the labels in a property of the polygons labels. To remove them, iterate through that array, calling .setMap(null) on each label.

  removePolygon.addEventListener('click', function() {
    selectedShape.setMap(null);
    drawingManager.setMap(null);
    for (var i = 0; i < selectedShape.labels.length; i++) {
      selectedShape.labels[i].setMap(null);
    }
  });

updated fiddle

code snippet:

var labels = [];
var allOverlays = [];

function setSelection(shape) {
  selectedShape = shape;
  shape.setEditable(true);
}

function initMap() {
  var options = {
    zoom: 14,
    center: {
      lat: 52.250618,
      lng: 20.9774
    }
  };

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    polygonOptions: {
      draggable: false,
      fillColor: "#0e97fa",
      fillOpacity: 0.2,
      strokeWeight: 2,
      strokeColor: "#0e97fa",
      editable: true,
      zIndex: 1
    },
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON,
        /* google.maps.drawing.OverlayType.POLYLINE, */
      ]
    },
    map: map,
    drawingMode: 'polygon'
  });


  function attachPolygonInfoWindow(polygon) {
    if (!polygon.labels) polygon.labels = [];
    for (var i = 0; i < polygon.labels.length; i++) {
      polygon.labels[i].setMap(null);
    }
    polygon.labels = [];
    var path = polygon.getPath();
    var points = path.getArray();
    var area = google.maps.geometry.spherical
      .computeArea(path.getArray())
      .toFixed(0);
    var bounds = new google.maps.LatLngBounds();
    var i;

    for (i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
    }

    var boundsCenter = bounds.getCenter();
    var centerLabel = new MapLabel({
      map: map,
      position: boundsCenter,
      fontSize: 14,
      align: "center",
      zIndex: 3
    });
    polygon.labels.push(centerLabel);

    centerLabel.set("position", bounds.getCenter());
    centerLabel.set("text", area + " m2");
    if (path.getLength() < 2) return;
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      // for each side in path, compute center and length
      var start = polygon.getPath().getAt(i);
      var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
      var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
      console.log(sideLength)
      var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
      /*  console.log("sideCenter=" + sideCenter.toUrlValue(6)); */
      var sideLabel = new MapLabel({
        map: map,
        fontSize: 14,
        align: "center",
        zIndex: 3
      });
      sideLabel.set("position", sideCenter);
      sideLabel.set("text", sideLength.toFixed(2) + "m");
      polygon.labels.push(sideLabel);
    }
  }

  function removePolygonInfoWindow() {
    for (var i = 0; i < labels.length; i++) {
      labels[i].setMap(null);
    }
    labels = [];
  }

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
    allOverlays.push(e);

    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      drawingManager.setDrawingMode(null);

      var newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, "click", function() {
        setSelection(newShape);
      });

      if (newShape.type == "polygon") {
        var path = newShape.getPath();

        google.maps.event.addListener(path, "insert_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        google.maps.event.addListener(path, "set_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        attachPolygonInfoWindow(newShape);
      }

      setSelection(newShape);
    }
  });

  var enablePolygon = document.getElementById('enablePolygon');
  enablePolygon.addEventListener('click', function() {
    drawingManager.setMap(map);
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });
  var removePolygon = document.getElementById('resetPolygon');
  removePolygon.addEventListener('click', function() {
    selectedShape.setMap(null);
    drawingManager.setMap(null);
    for (var i = 0; i < selectedShape.labels.length; i++) {
      selectedShape.labels[i].setMap(null);
    }
  });
}

initMap();

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<button id="enablePolygon">draw</button>
<button id="resetPolygon">remove</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/maplabel.js"></script>