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++;
});
See Question&Answers more detail:os