Click Events not working after recreation of Polygon on Button Click-CodePudding

I have created a polygon with click event listeners (Click and Right click). On very first time clicking on rectangle gives alert, but after recreating the rectangle, events are not working. I am assuming that I am replacing a map object with other with same name. Not sure that what I am doing wrong. Refer my code snippet

var rectangle;
var map;
const bounds = {
    north: 44.599,
    south: 44.49,
    east: -78.443,
    west: -78.649,
  };
function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 44.5452, lng: -78.5389 },
    zoom: 9,
  });
  
 CreatePolygon();
 google.maps.event.addListener(rectangle, 'click', function() {
        alert("Clicked");
      });
 google.maps.event.addListener(rectangle, 'rightclick', function() {
        alert("Right Clicked");
      });
      
 const btnCtrlDiv = document.createElement("div");
 CustomButton(btnCtrlDiv, map);
 map.controls[google.maps.ControlPosition.LEFT_CENTER].push(btnCtrlDiv);
}

function CreatePolygon(){
  if(rectangle){
  rectangle.setMap(null);
  alert("recreating and click events gone.");
  }
  
  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true,
  });
  rectangle.setMap(map);
}

function CustomButton(controlDiv,gmap){
    const controlUIR = document.createElement("div");
    controlUIR.setAttribute("id", "btn1");
    controlUIR.style.backgroundColor = "#d6d6d6";
    controlUIR.innerHTML="Click Me";
    controlUIR.style.fontSize = "16px";
    controlUIR.style.height = '20px';
    controlUIR.style.width = '75px';
    controlUIR.style.border = "1px solid #000000";
    controlDiv.appendChild(controlUIR);
    // Setup the click event listeners
    controlUIR.addEventListener("click", () => {
      CreatePolygon();
    });
    }

#map {
  height: 100%;
}

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

<html>
  <head>
    <title>User-Editable Shapes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <body>
  <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIc-PhM9_Uwpjbks0WPvtkKYagOXTk12A&callback=initMap&" async defer></script>
    <div id="map"></div>
  </body>
</html>

CodePudding user response：

The event listeners you added to the original rectangle stay with that object (which you remove from the map). If you want the same events on the new rectangle, you need to add them to the new rectangle:

function CreatePolygon(){
  if(rectangle){
  rectangle.setMap(null);
  alert("recreating and click events gone.");
  }
  
  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true,
  });
  rectangle.setMap(map);
   google.maps.event.addListener(rectangle, 'click', function() {
        alert("Clicked");
      });
   google.maps.event.addListener(rectangle, 'rightclick', function() {
        alert("Right Clicked");
      });
}

updated code snippet:

var rectangle;
var map;
const bounds = {
    north: 44.599,
    south: 44.49,
    east: -78.443,
    west: -78.649,
  };
function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 44.5452, lng: -78.5389 },
    zoom: 9,
  });
  
 CreatePolygon();
      
 const btnCtrlDiv = document.createElement("div");
 CustomButton(btnCtrlDiv, map);
 map.controls[google.maps.ControlPosition.LEFT_CENTER].push(btnCtrlDiv);
}

function CreatePolygon(){
  if(rectangle){
  rectangle.setMap(null);
  alert("recreating and click events gone.");
  }
  
  rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true,
  });
  rectangle.setMap(map);
   google.maps.event.addListener(rectangle, 'click', function() {
        alert("Clicked");
      });
 google.maps.event.addListener(rectangle, 'rightclick', function() {
        alert("Right Clicked");
      });
}

function CustomButton(controlDiv,gmap){
    const controlUIR = document.createElement("div");
    controlUIR.setAttribute("id", "btn1");
    controlUIR.style.backgroundColor = "#d6d6d6";
    controlUIR.innerHTML="Click Me";
    controlUIR.style.fontSize = "16px";
    controlUIR.style.height = '20px';
    controlUIR.style.width = '75px';
    controlUIR.style.border = "1px solid #000000";
    controlDiv.appendChild(controlUIR);
    // Setup the click event listeners
    controlUIR.addEventListener("click", () => {
      CreatePolygon();
    });
    }

#map {
  height: 100%;
}

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

<html>
  <head>
    <title>User-Editable Shapes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <body>
  <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIc-PhM9_Uwpjbks0WPvtkKYagOXTk12A&callback=initMap&" async defer></script>
    <div id="map"></div>
  </body>
</html>