javascript - Removing Rectangle from Map

Question

I am trying to create a marker that will create a rectangle on click and then remove the rectangle on the next click. The rectangle is correctly being inserted into the map but it is not being removed on the next click. What should I change to make it so that the rectangle is correctly removed?

var myOptions = {zoom:11,center:new google.maps.LatLng(37.55020520861464,126.98140242753904),mapTypeId: google.maps.MapTypeId.ROADMAP};
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    marker1 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.55020520861464,126.98140242753904)});
    marker2 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.558816, 126.908212)});
    marker3 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.580107, 127.056797)});
    marker4 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.446290, 126.862625)});
    marker5 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.435041, 126.999528)});
    marker6 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.522926, 126.853862)});
var m1 = 1;
    marker1.addListener('click', function() {
        var rectangle1 = new google.maps.Rectangle({
            map: map,
            bounds: new google.maps.LatLngBounds (
                new google.maps.LatLng(37.778261, 126.98140242),
                new google.maps.LatLng(36.255123, 128.0)
            )
        }); 
        if (m1 % 2) {
            rectangle1.setMap(map);
        }
        else {
            rectangle1.setMap(null);
        }
        m1++;
    });

Answer 1

One option:

1. define the rectangle1 variable outside the scope of the click listener
2. check if the rectangle object exists and has a .setMap method.
3. if it does, set it's map property to null (the rectangle is currently displayed), hide it, and set it to null.
4. if it doesn't exist, or doesn't have a .setMap method, create the marker.

var rectangle1;
marker1.addListener('click', function(evt) {
  if (rectangle1 && rectangle1.setMap) {
    rectangle1.setMap(null);
    rectangle1 = null;
    console.log("marker 1 clicked, setMap(null)");
  } else {
    rectangle1 = new google.maps.Rectangle({
      map: map,
      bounds: new google.maps.LatLngBounds(
        new google.maps.LatLng(37.778261, 126.98140242),
        new google.maps.LatLng(36.255123, 128.0))
    });
    console.log("marker 1 clicked, create Rectangle");
  }
});

code snippet:

var geocoder;
var map;

function initialize() {
  var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(37.55020520861464, 126.98140242753904),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), myOptions);
  marker1 = new google.maps.Marker({
    map: map,
    title: "marker 1",
    position: new google.maps.LatLng(37.55020520861464, 126.98140242753904)
  });
  var rectangle1;
  marker1.addListener('click', function(evt) {
    if (rectangle1 && rectangle1.setMap) {
      rectangle1.setMap(null);
      rectangle1 = null;
      console.log("marker 1 clicked, setMap(null)");
    } else {
      rectangle1 = new google.maps.Rectangle({
        map: map,
        bounds: new google.maps.LatLngBounds(
          new google.maps.LatLng(37.778261, 126.98140242),
          new google.maps.LatLng(36.255123, 128.0))
      });
      console.log("marker 1 clicked, create Rectangle");
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>