javascript google-maps google-maps-api-3 closures clicklistener

Click Listeners in Loop for rectangle array -- Closure

My question is very similar to this post but the solution doesn't work for me for some reason --> Click Listeners in Loop - Array and Closure

Users can click on google map api; I want to make rectangles of 2kmx2km wherever the user clicks, add these to a rectangle array, and add listeners to them for clicks. The rectangles show up and the rectangle array is populated, but the click listeners just. don't. work. I'm at my wit's end and have endlessly researched and tried various solutions; any help will be much appreciated!

var SFLatLng = {lat: 37.7739, lng: -122.4312};
var map;
var rectangleArray = [];
var rectangleArraySize = 0;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
         center: SFLatLng,
         zoom: 12,
         scaleControl: true,
    });
    doStuff();
} //end map init

function doStuff() {
      //make rectangle of size 2kmx2km on map click
      map.addListener('click', function(e) {				  
	  var bounds = calcBounds(e.latLng, new google.maps.Size(2000,2000));
	  addRectangleToMap(bounds);
      });

     function addRectangleToMap(boundsObj) {
	 rectangleArray[rectangleArraySize] = {
  	    rect: new google.maps.Rectangle({
		 map: map,
                 bounds: boundsObj,
       	         fillColor:'red',
                 fillOpacity: 0.3,
                 strokeOpacity: 0,
                 clickable: true,
                 zIndex: 1
  		})
	  };
	  rectangleArraySize++;
     }

     function addClickListener(rectObj) {
         google.maps.event.addListener(rectObj.rect, 'click', function() {
              alert("clicked!")
         });
     }

     for (var i = 0; i < rectangleArray.length; i++ ) {			    
          if(rectangleArray[i]) { //safety
              addClickListener(rectangleArray[i]);
          }			    
     }
}

/** @this {google.maps.Rectangle} */
function calcBounds(center,size){
    //Calculates bounds ...
}

Solution

You need to call the addClickListener function on the rectangle.

function addRectangleToMap(boundsObj) {
  rectangleArray[rectangleArraySize] = {
      rect: new google.maps.Rectangle({
      map: map,
      bounds: boundsObj,
      fillColor:'red',
      fillOpacity: 0.3,
      strokeOpacity: 0,
      clickable: true,
      zIndex: 1
    })
  };
  addClickListener(rectangleArray[rectangleArraySize]);
  rectangleArraySize++;
}

proof of concept fiddle

code snippet:

var SFLatLng = {
  lat: 37.7739,
  lng: -122.4312
};
var map;
var rectangleArray = [];
var rectangleArraySize = 0;
var infowindow = new google.maps.InfoWindow();

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: SFLatLng,
      zoom: 12,
      scaleControl: true,
    });
    doStuff();
  } //end map init

function doStuff() {
  //make rectangle of size 2kmx2km on map click
  map.addListener('click', function(e) {
    var bounds = calcBounds(e.latLng, new google.maps.Size(2000, 2000));
    addRectangleToMap(bounds);
  });

  function addRectangleToMap(boundsObj) {
    rectangleArray[rectangleArraySize] = {
      rect: new google.maps.Rectangle({
        map: map,
        bounds: boundsObj,
        fillColor: 'red',
        fillOpacity: 0.3,
        strokeOpacity: 0,
        clickable: true,
        zIndex: 1
      })
    };
    addClickListener(rectangleArray[rectangleArraySize]);
    rectangleArraySize++;
  }

  function addClickListener(rectObj) {
    google.maps.event.addListener(rectObj.rect, 'click', function() {
      // alert("clicked!");
      infowindow.setContent("clicked:<br>" + this.getBounds().toUrlValue());
      infowindow.setPosition(this.getBounds().getCenter());
      infowindow.open(map);

    });
  }

  for (var i = 0; i < rectangleArray.length; i++) {
    if (rectangleArray[i]) { //safety
      addClickListener(rectangleArray[i]);
    }
  }
}

/** @this {google.maps.Rectangle} */

function calcBounds(center, size) {
  var obj = {
    south: 37.70339999999999,
    west: -122.52699999999999,
    north: 37.812,
    east: -122.3482,
    lat: 37.7749295,
    lng: -122.4194155
  };
  if (rectangleArray.length == 0) {
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(obj.south, obj.west), new google.maps.LatLng(obj.lat, obj.lng));
  } else {
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(obj.lat, obj.lng), new google.maps.LatLng(obj.north, obj.east));
  }
  console.log(bounds.toUrlValue());
  //Calculates bounds ...
  return bounds;
}
google.maps.event.addDomListener(window, "load", initMap);

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>