toggle opened infobox google map api

google map api close opened infowindow while clicking on another one

// create sample map
var map = new google.maps.Map(mapCanavas ,{
  zoom: 10,
  center: LatLng,
  disableDefaultUI:true,
  zoomControl: true,
  zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT
  },
  scrollwheel: false,
});

// current active window
// we will use this prop to keep track of active window
map.active_window = false;

// create sample marker
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(latitude, longitude);,
  title: 'Marker',
});

// create sample infoox
var infobox = new InfoBox({
  content: "info Box",
  disableAutoPan: false,
  // maxWidth: 150,
  pixelOffset: new google.maps.Size(40, -150),
  zIndex: null,
  boxStyle: {
      opacity: 1,
      width: "300px"
  },
  closeBoxMargin: "12px 4px 2px 2px",
  infoBoxClearance: new google.maps.Size(10, 10)
});


// open infobox On Marker click Event
google.maps.event.addListener(marker, 'click', function() {
  
  // center the map to the marker position
  map.setCenter(marker.getPosition());

  // if there is active window
  // close it
  if (map.active_window != false) {
      map.active_window.infobox.close(map,map.active_window.marker);
  }

  // else open it
  infobox.open(map,marker);
  // then add the active window to this prop
  map.active_window = {infobox: infobox , marker: marker};

});


// Close InfoWindow On Click Ouside The Marker
google.maps.event.addListener(map, 'click', function(event) {
  // close the infobox
  infobox.close(map,marker);
  // clear opened_box property
  map.active_window = false;
});