1つのgooglemapに複数のピンを立て、同時に表示される吹き出しが一つになるようにしたい

Question

お世話になっております。

googlemapAPIを使い、
1つのgooglemapに複数のピンを立てたマップを作成しております。

方法は下記URLの方法そのままです。

http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

実装は問題なくできるのですが、このまま流用しますと、ピンをクリックした時に
表示される吹き出しが、他のピンをクリックした際に消えずそのまま残るのですが、
これを先に表示されているものが削除されるようにしたいです。

http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_singleInfoWindow.html
http://pinoyuki.hatenablog.com/entry/2012/03/17/010213
↑上記のURLを参考に、markerEvent()内に

			if (currentInfoWindow) {
				currentInfoWindow.close();
			}
			//情報ウィンドウを開く
			infoWnd.open(map, marker);
			
			currentInfoWindow = infoWnd;
		});
		return marker;
	}
	window.onload = initialize;

や、

    if (openInfoWindow) {
      openInfoWindow.close();
    }

を追加してみたのですが、
ピンから吹き出しが出ないといった状態になったりとうまくいきませんでした…
ご教授いただけると幸いです。

下記ソースは最初に挙げさせていただいた
http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
を流用したソースとなっております。

      <div id="google-maps" class="google-maps"></div>

var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
    {
        name: 'テスと',
        lat: 35.681298, // 緯度
        lng: 139.7640582 // 経度
    }, {
        name: 'てすと01',
        lat: 35.6810041, // 緯度
        lng: 1139.7615828 // 経度
    }
];
 
function initMap() {
    // 地図の作成
    var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
    map = new google.maps.Map(document.getElementById('google-maps'), { // #sampleに地図を埋め込む
        center: mapLatLng, // 地図の中心を指定
        zoom: 18 // 地図のズームを指定
    });
 
    // マーカー毎の処理
    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="name">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
        });
 
        markerEvent(i); // マーカーにクリックイベントを追加
    }

}
 
// マーカーにクリックイベントを追加
function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
        infoWindow[i].open(map, marker[i]);
    });
}

Answer 1

infoWindow[i]のように複数のinfoWindowを作らず、中身だけを替えたものを1つでいいのでは？

【JavaScript - Google Mapの情報ウインドウを常にひとつだけ表示したい(31721)｜teratail】
https://teratail.com/questions/31721

---

追記：

var map;
var marker = [];
// var infoWindow new google.maps.InfoWindow();//20161110 17:22修正
var infoWindow;//20161110 17:22修正
var markerData = [ // マーカーを立てる場所名・緯度・経度
    {
        name: 'テスと',
        lat: 35.681298, // 緯度
        lng: 139.7640582 // 経度
    }, {
        name: 'てすと01',
        lat: 35.6810041, // 緯度
        lng: 1139.7615828 // 経度
    }
];

function initMap() {
    // 地図の作成
    var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
    map = new google.maps.Map(document.getElementById('google-maps'), { // #sampleに地図を埋め込む
        center: mapLatLng, // 地図の中心を指定
        zoom: 18 // 地図のズームを指定
    });

    infoWindow = new google.maps.InfoWindow();//20161110 17:22修正

    // マーカー毎の処理
    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 // マーカーを立てる地図を指定
        });

        markerEvent(i,'<div class="name">' + markerData[i]['name'] + '</div>'); // マーカーにクリックイベントを追加
    }

}

// マーカーにクリックイベントを追加
function markerEvent(i, html) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
        //infoWindow[i].setContent( html );//20161110 17:59修正
        //infoWindow[i].open(map, marker[i]);//20161110 17:59修正
        infoWindow.setContent( html );//20161110 17:22修正
        infoWindow.open(map, marker[i]);//20161110 17:22修正
    });
}

Comments

[miyoshi_work]

ご回答ありがとうございます。

追記の方試させていただいたのですが
var infoWindow new google.maps.InfoWindow();
でエラーとなってしまいました…
（エラー文：uncaught syntaxerror unexpected token new）

var infoWindow = new google.maps.InfoWindow();
で=を入れたのですが、
（uncaught referenceerror google is not defined）
のエラーが出てしまい…

mapはhttps://で読み込んでいるのですが…

URLいただいたものを参考に少し考えてみようと思います、
ありがとうございます＞＜

[kei344]

ああ、すいません、いくつか不備があったようです。修正しておきます。

> （uncaught referenceerror google is not defined）
initMapが呼ばれるまでロードが完了していない状態なので、その警告です。

[miyoshi_work]

ご回答ありがとうございます！

修正後を試したのですが
（Uncaught TypeError: Cannot read property 'setContent' of undefined）
となってしまいました…

[miyoshi_work]

お忙しいのになんどもすみませんでした…ありがとうございます！

infoWindow[i]自分でもよく調べれば分かることでした…
GoogleAPIを使うのが初めてで冷静に考えることができなくなっていました…

大変ご丁寧にありがとうございます、助かりました