Google map API で表示された吹き出しを任意の場所クリックで消したい！

地元の消防団で「消火栓マップ」を作成し運用しているのですが、マーカーをクリック（orタップ）した時に出てくる吹き出しを吹き出し内にある「☓」をクリックしなくても、地図上の任意の場所をクリック（orタップ）することで消したいのですが、上手くいきません。

以前はFusiontableレイヤーを採用していたのですが、2019年12月に廃止されるとのことで、もともとあったデータをkmlファイルにして、kmlレイヤーで再設定した経緯があります。以前のFusiontableレイヤーでは上手くできていました。

infowindow の open や close の表記がダメなのだと思い、いろいろ試みたのですが行き詰まってしまいました。

アドバイス頂ければ助かります。よろしくお願い致します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>消火栓マップ</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    #floating-panel {
        position: absolute;
        width:300px;
        top: 6%;
        left: 50%;
        -webkit-transform: translate(-50%,   -50%);
        transform: translate(-50%,   -50%);
        padding-left:10px;
        padding-right:10px;
        padding-top:5px;
        padding-bottom:5px;
        z-index: 5;
        background-color: #fff;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 28px;
      }

</style>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="floating-panel">
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">車</option>
<option value="WALKING">歩き</option>
</select>

<select id="fromAddress" onchange="calcRoute();">
<option value="34.790348, 134.719083">1支部</option>
<option value="34.788139, 134.723404">2支部</option>
<option value="34.796028, 134.723404">3支部</option>
<option value="34.801071, 134.717789">4支部</option>
<option value="34.800423, 134.706573">5支部</option>
<option value="34.805237, 134.698410">6支部</option>
</select>

<form action="#" onsubmit="calcRoute(fromAddress.value, this.toAddress.value); return false">
<font size="3"color="#ff0000"><b>火災発生住所</b></font>&nbsp;⇒ <input type="text" size="10" id="toAddress" name="to" value="" />
<input type="button" value="検索" onclick="calcRoute()">

</form>
</div>
</body>


<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=【APIキー】"></script>      
<script type="text/javascript"> 

var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();


var map, infowindow; 
   function initialize() { 
     infowindow = new google.maps.InfoWindow(); 
     var myLatlng = new google.maps.LatLng(34.796831, 134.714427); 
     var myOptions = { 
        zoom : 15, 
        mapTypeId : google.maps.MapTypeId.SATELLITE,
        center : myLatlng, 
   }; 

   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var Layer = new google.maps.KmlLayer({
       url: 'URL.kml',
       map: map,
       suppressInfoWindows: false,//true を指定するとマーカーをクリックしても吹き出しが表示されない！
       preserveViewport: true //Zoomとセンターが正常になった∵KMLを読み込むとZoom、Centerが効かなくなる！
  });

   google.maps.event.addListener(layer, "click", function() { 
     infowindow.setOptions({ 
          position : evt.latLng, 
          content : evt.infoWindowHtml, 
          pixelOffset : evt.pixelOffset 
          }); 
          infowindow.open(map); 
        }); 

   google.maps.event.addListener(map, "click", function() { 
     infowindow.close(); 
        }); 

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay, "directions_changed", function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}

function calcRoute(fromAddress, toAddress) {
var selectedMode = document.getElementById("mode").value;
var fromAddress = document.getElementById("fromAddress").value;
var toAddress = document.getElementById("toAddress").value;
var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
func(response);
}
});
}

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.9,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'URL.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'URL.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
map.fitBounds(routes.bounds); // 追記（自動的に...）

} 

</script>
</html>