GoogleマップAPIでマーカーは複数、吹き出しは１つだけ表示したい

GoogleマップAPIでマーカーを複数表示して、
吹き出しは１つしか表示されないようにしたいと思います。
（吹き出しが出てる状態で、別のマーカーをクリックすると、先に開いてる吹き出しを消してから新しい吹き出しが開くようにしたいです。）

以下のサイトを参考にしておりますが、どこが悪いかもわからず、行き詰ってしまいました。
アドバイスいただければ幸いです。
http://yuuki1413.hatenablog.com/entry/2017/07/25/155501

下記のコードでは、吹き出しがすべて開きっぱなしになる以外は、正常に動いています。
##現状のソースコード

<script>
var map;
var marker = [];
var infoWindow = [];
var currentInfoWindow = null;
var markerData = [ // マーカーを立てる場所名・緯度・経度
	{
		name: '地区センター',
		lat: 35.5351164,
		lng: 139.5915397,
		icon: '/shared/img/marker/1_1.png'
	}, 
	{
		name: '東急ストア',
		lat: 35.5348885,
		lng: 139.58851219999997,
		icon: '/shared/img/marker/2_1.png'
	}, 
	{
		name: '業務スーパー',
		lat: 35.5361523,
		lng: 139.58835669999996,
		icon: '/shared/img/marker/3_1.png'
	}, 
	{
		name: 'せせらぎ公園',
		lat: 35.5381243,
		lng: 139.59250610000004,
		icon: '/shared/img/marker/4_1.png'
	}
 
];

function initMap() {
	// 地図の作成
	map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む
		center: new google.maps.LatLng(35.5351164, 139.5915397), // 地図の中心を指定
		zoom: 15 // 地図のズームを指定
	});

	// マーカー毎の処理
	for (var i = 0; i < markerData.length; i++) {
		markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
		marker[i] = new google.maps.Marker({ // マーカーの追加
			position: markerLatLng, // マーカーを立てる位置を指定
			map: map // マーカーを立てる地図を指定
		});

		infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
			content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
		});

		markerEvent(i); // マーカーにクリックイベントを追加
        marker[i].setOptions({
            icon: {
                url: markerData[i]['icon']// マーカーの画像を変更
            }
        });
	}
}
// マーカーにクリックイベントを追加
function markerEvent(i) {
    if (currentInfoWindow) {
        currentInfoWindow.close();
    }
	marker[i].addListener('click', function() { // マーカーをクリックしたとき
		infoWindow[i].open(map, marker[i]); // 吹き出しの表示
        currentInfoWindow = infoWindow[i];
	});
}
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

もう９割方完成していますね。
currentInfoWindow をクローズするタイミングを修正しましょう。

javascript
1function markerEvent(i) {
2    marker[i].addListener('click', function() { // マーカーをクリックしたとき
3
4        if (currentInfoWindow) {
5            currentInfoWindow.close();
6        }
7
8        infoWindow[i].open(map, marker[i]); // 吹き出しの表示
9        currentInfoWindow = infoWindow[i];
10    });
11}