Add google maps event listener to close button in InfoWindows to show alert

Question

I want to make alert when close button in infowindow clicked.

I tried make addListener closeclick event, but the alert is not showing.

google.maps.event.addListener(info1, "closeclick", function(){
      alert("closed"); 
      console.log("alert show");
});

I also tried console.log in code above, but it's not show anything

Here's the full code

var lat = -6.121435,
    lng = 106.774124,
    latlng = new google.maps.LatLng(lat, lng);
var mmm;
var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        fullscreenControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.TOP_left
        }
        
    },
map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.setOptions({disableDoubleClickZoom: true });

var info1 = new google.maps.InfoWindow({}); 

//to show info window and marker
google.maps.event.addListener(map, "dblclick", function (e) { 
        
    placeMarker(e.latLng);
});

//code to show alert
google.maps.event.addListener(info1, "closeclick", function(){
      alert("closed"); 
      console.log("alert show");
});

function placeMarker(location) {
  const contentString = 
       '<p style="text-align: center;margin-top:15px;margin-right:10px;">'+
              'Here is your marker'+
       '</p>';
  info1 = new google.maps.InfoWindow({
     content: contentString,
     maxWidth: 350,
     maxHeight: 150
  });
        
  if (mmm == null) {
     mmm = new google.maps.Marker({
       position: location,
       map: map,
       icon: blue
     });
  } else {
     mmm.setPosition(location);
  }
  info1.open(map, mmm);
}

Answer 1

After fixing the issues mentioned in the comments on your question, it works as expected.

Please see the comments in the code for what I have modified. I also removed the icon: blue which was undefined.

function initialize() {

  var lat = -6.121435,
    lng = 106.774124,
    latlng = new google.maps.LatLng(lat, lng);

  var mmm = null; // Declare mmm variable (null)

  var mapOptions = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      fullscreenControl: false,
      panControl: false,
      streetViewControl: false,
      disableDoubleClickZoom: true, // Moved this line here and remove the setOptions() which has the same effect
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_left
      }
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var info1 = new google.maps.InfoWindow({
    maxWidth: 350, // Moved this here
    maxHeight: 150 // Moved this here
  });

  //to show info window and marker
  google.maps.event.addListener(map, "dblclick", function(e) {
    placeMarker(e.latLng);
  });

  //code to show alert
  google.maps.event.addListener(info1, "closeclick", function() {
    alert("closed");
    console.log("alert show");
  });

  function placeMarker(location) {
    const contentString =
      '<p style="text-align: center;margin-top:15px;margin-right:10px;">' +
      'Here is your marker' +
      '</p>';

    info1.setContent(contentString); // Use the setContent method instead of creating another Infowindow object

    if (mmm == null) {
      mmm = new google.maps.Marker({
        position: location,
        map: map
      });
    } else {
      mmm.setPosition(location);
    }
    info1.open(map, mmm);
  }
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>