google Mapで複数のinfoWindowをループでclose()で閉じることができない

Question

Google Mapで以下のように、すべてのinfoWindowを非表示させようとオブジェクトをループさせてすべての要素にclose()を適用しようとしたところ動作をいたしませんでした。

原因を探るべく具体的に試しに一つ
infoWindow["k2"][0].close();//これは消える
を実行したところ["k2"][0]の要素は非表示になることがわかりました。

ただし、
infoWindow[markerKeys[i]][j].close();//これは消えない
で["k2"][0]のループに入っても消えてくれません。もちろん他のinfoWindowもすべて消えてくれません。

オブジェクトの中身に相違があるのかと以下の検証を実行しました。
console.log(infoWindow["k2"][0]==infoWindow[markerKeys[i]][j]);
すると["k2"][0]のループで正しくtrueが返されることが確認できました。

この状況から、["k2"][0]に限らず、ループ処理の場合だけclose()が動作しない理由がわからないのですが、同じような現象を経験したことがある方や、原因がわかる方がいらっしゃればお力添えをお願いできますでしょうか。

何卒、よろしくお願い申し上げます。

/*
var windows={
c1:{0._sf{省略}}
k1:{0._sf{省略}}
k2:{0._sf{省略},1._sf{省略}}
}
*/

$(function(){
  $('.ckClose').on('click',function(){
    var windowKeys=Object.keys(windows);
    var windowLen=windowKeys.length;
      for (var i = 0; i < windowLen; i++) {
        for (var j = 0, innerLen=Object.keys(windows[windowKeys[i]]).length; j <innerLen ; j++) {
          console.log(infoWindow["k2"][0]==infoWindow[windowKeys[i]][j]);//ここで違いを検証
          infoWindow["k2"][0].close();//これは消える
          infoWindow[windowKeys[i]][j].close();//これは消えない
        }
      }
  })
})

以下の通り、具体的なコードを開示させていただきます。
$('.ckClose').on('click',function()の箇所が上記の具体的な質問の箇所です。私のGoogle Chrome(バージョン: 77.0.3865.120（Official Build） （64 ビット）)のDeveloper Tool上では特段のエラーは出力されていません。

<div id="map" class="web_map"></div>

<div class="btnWrapper">
 <div id="" class="btn displayIcon ckOpen">X</div
 <div id="" class="btn displayIcon ckClose">X</div>
</div>

var map;
var mObj ={};
var marker = {};
var infoWindow = {};


   mObj.k1=
      [
        {
         lat:35.639014,
         lng:139.638741,
         icon:"./z_icon/1_k.png"
        }
      ];

   mObj.c1=
     [
      {
       lat:35.631350,
       lng:139.646900,
       icon:"./z_icon/1_c.png"
      }      
      ];

   mObj.k2=
      [
       {
         lat:35.562416,
         lng:139.614346,
         icon:"./z_icon/2_k.png"
       },      
       {
         lat:35.757992,
         lng:139.827880,
         icon:"./z_icon/2_k.png"
       }      
      ];

   mObj.c3=
      [
       {
        lat:35.591418,
        lng:139.546924,
        icon:"./z_icon/3_c.png"
        }     
       ];

// console.log(mObj);

function initialize() {
    var latlng = new google.maps.LatLng(35.680552, 139.766923);
    var opts = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), opts);

var mObjKeys=Object.keys(mObj);
var keyLen=mObjKeys.length;

     for (var i = 0; i < keyLen; i++) {
        for (var j = 0; j < mObj[mObjKeys[i]].length; j++) {
                if(j==0){
                    marker[mObjKeys[i]]={[j]:new google.maps.Marker({
                          position: new google.maps.LatLng({lat:mObj[mObjKeys[i]][j]['lat'],lng:mObj[mObjKeys[i]][j]['lng']}),
                          map: map,
                          icon:new google.maps.MarkerImage(mObj[mObjKeys[i]][j]['icon'],null,null,null,new google.maps.Size(41, 41))
                          })
                          }
                    infoWindow[mObjKeys[i]]={[j]: new google.maps.InfoWindow({ // 吹き出しの追加
                          content:mObj[mObjKeys[i]][j]['contents']
                          })
                          }

                 } else if(j>0){
                   marker[mObjKeys[i]][j]=new google.maps.Marker({
                         position: new google.maps.LatLng({lat:mObj[mObjKeys[i]][j]['lat'],lng:mObj[mObjKeys[i]][j]['lng']}),
                         map: map,
                         icon:new google.maps.MarkerImage(mObj[mObjKeys[i]][j]['icon'],null,null,null,new google.maps.Size(41, 41))
                         });
                   infoWindow[mObjKeys[i]][j]= new google.maps.InfoWindow({ // 吹き出しの追加
                         content:mObj[mObjKeys[i]][j]['contents']
                         });
                 }
            markerEvent(i,j)
            function markerEvent(i,j){
              marker[mObjKeys[i]][j].addListener('click', function() { // マーカーをクリックしたとき
              infoWindow[mObjKeys[i]][j].open(map,marker[mObjKeys[i]][j]); // 吹き出しの表示
              });
            }
        }
      }
}

console.log(infoWindow);
/*
{
 c1:{0:_.Sf}
 c3:{0:_.Sf}
 k1:{0:_.Sf}
 k2:{0:_.Sf,1:_.Sf}
}
*/
/*ckCloseボタンによりすべてのMarkerを削除する*/
$(function(){
  $('.ckClose').on('click',function(){
    var markerKeys=Object.keys(marker);
    var markerLen=markerKeys.length;
      for (var i = 0; i < markerLen; i++) {
        for (var j = 0, innerLen=Object.keys(marker[markerKeys[i]]).length; j <innerLen ; j++) {
          marker[markerKeys[i]][j].setMap(null);
          infoWindow[markerKeys[i]][j].close();//ここが動作しない
          infoWindow["k2"][0].close();//これは動作する
　　　　　　console.log(infoWindow[markerKeys[i]][j]==infoWindow["k2"][0])//["k2"][0]のループの時にはtrueを返す
        }
      }
  })
})

/*ckOpenボタンによりすべてのMarkerを表示する*/
$(function(){
    $('.ckOpen').on('click',function(){
      var markerKeys=Object.keys(marker);
      var markerLen=markerKeys.length;
        for (var i = 0; i < markerLen; i++) {
          for (var j = 0, innerLen=Object.keys(marker[markerKeys[i]]).length; j <innerLen ; j++) {
            marker[markerKeys[i]][j].setMap(map);
          }
        }
    })
})

Comments

[mix-peach]

質問の説明文内に例示されている部分的なコードと、ご提示コードでは使っている変数が異なるようですが、実際に動作しないコードをご提示いただいていますか？
また、close()実行で消えない時に、何かエラーは出ていないのでしょうか？
あと、infoWindowの定義場所と中身の作成コードの追記、windowsは定義可能なところまでサンプルを実データに近づけてもらえると回答者が検証しやすくなると思います。

[pegy]

コメントを頂きまことにありがとうございます。
最小化しようと努めたのですがかえってわかりづらく申し訳ございません。コードの全貌を記載させていただきました。なお、もう一点ご指摘にあったエラーについては、上記のコードで動作させた結果についても、Developer ToolのConsole上、何も出力されておりません。
よろしくお願い申し上げます。

[mix-peach]

「インフォウィンドウが消えない」現象の発生手順と内容は、

【手順】
①initialize()の実行で、地図とマーカーが初期表示された状態で、地図上のマーカーをクリックして、インフォウィンドウを表示する
②.ckCloseクリックで、全マーカ・インフォウィンドウを非表示にする
③.ckOpenクリックで再表示する

【現象の内容】　→　③で、インフォウインドウが出た状態のままになっている

ということで合ってますか？それとも他の手順で発生する別の現象でしょうか？（後者であれば発生手順を詳しく教えてほしいです）

[pegy]

コメント頂き誠にありがとうございます。
申し訳ございません、ご指摘の重要な情報を開示することを失念しておりました。
仰って頂いた内容の通り（前者）です。
宜しくお願い申し上げます。

Answer 1

どうやら、インフォウィンドウの.close()は、
地図上に表示されているものがあれば、閉じますよ！　という処理のようです。

なので、処理順序さえ変えれば、期待する動作になりました。

  $('.ckClose').on('click',function(){
      var markerKeys=Object.keys(marker);
      var markerLen=markerKeys.length;
      for (var i = 0; i < markerLen; i++) {
        for (var j = 0, innerLen=Object.keys(marker[markerKeys[i]]).length; j <innerLen ; j++) {
          infoWindow[markerKeys[i]][j].close();//インフォウィンドウを閉じてから
          marker[markerKeys[i]][j].setMap(null);//マーカーを消す
        }
      }
  })

なお、infoWindow["k2"][0].close();//これは消えるこちらですが、
実は「期待した通りに動いていた」わけではなく、infoWindow["k2"][0]がLoop処理の1件目ではないので、infoWindow["k2"][0]に限って、
・インフォウィンドウを消す
・マーカーを消す
の順番で処理が行われた為、「たまたま期待する動作になっていた」ということになります。

元の処理順序のまま、for文の外に出してみると

  $('.ckClose').on('click',function(){
      var markerKeys=Object.keys(marker);
      var markerLen=markerKeys.length;
      for (var i = 0; i < markerLen; i++) {
        for (var j = 0, innerLen=Object.keys(marker[markerKeys[i]]).length; j <innerLen ; j++) {
          marker[markerKeys[i]][j].setMap(null);//マーカーを消す
          infoWindow[markerKeys[i]][j].close();//インフォウィンドウを閉じる
        }
      }
      infoWindow["k2"][0].close();//これでは消えないのです
  })

期待する動作になりませんので、このコードのみでインフォウィンドウが消えるわけではないことが分かるはず。。。

以上、ご参考までに・・！

---

追記です。

close()メソッドが表示を前提にしているという仕様

こちらは断言できる程js内部は確認してないので、「・・のようです」と書きました・・。
が一応、close()メソッド自体は、表示有無にかかわらず実行出来てエラーにならないことと、実際には表示されているときしか閉じられないことの2点からそのように判断をした感じです。

今回の場合は、動作確認用に書いたコードが「うまくいっちゃった」のが、原因解明できなくなってしまった主な原因ですよね。
自らの罠にはまることは、たぶんベテランさんでもたまに起きちゃうので仕方ないと思います。
ただそこから打開策まで辿り着くための、経験値等が足りないだけ・・かなぁと。

本当は、「やりたいけど、できないことだけをミニマム」で実行して、動作確認してみたらよかっただけなのです。（これ、teratailで回答者さん側の助言でよく見かけると思います）

今回の話で言うなら、

//マーカーを消すところを一旦コメントアウトする
//          marker[markerKeys[i]][j].setMap(null);//マーカーを消す
          infoWindow[markerKeys[i]][j].close();//インフォウィンドウを閉じる

こうするだけで、「ループでclose()で閉じることができない」と思っていた

infoWindow[markerKeys[i]][j].close();//インフォウィンドウを閉じる

ここには、実際には問題がないことに気づけます。
気づけさえすれば、

上手く行かない時と何がちがうのか
↓
「マーカーを先に消している」ことだけ違う
↓
じゃあ「マーカーを先に消している」ことが、上手く行かない原因なのだろうから、後で消してみてはどうだろう・・

と打開策に辿り着けたハズ・・・です！多分！　^^

---

常に一つだけ表示したいのであれば、複数をオブジェクトにして保持して置かなくても良いのでは？と思いますが、
現状維持かつ、ループが面倒というのであれば、

function markerEvent(i,j){
     if(nowInfoWindow){ nowInfoWindow.close(); }
     nowInfoWindow = infoWindow[mObjKeys[i]][j];
     marker[mObjKeys[i]][j].addListener('click', function() { // マーカーをクリックしたとき
        nowInfoWindow.open(map,marker[mObjKeys[i]][j]); // 吹き出しの表示
     });
}

とするだけでも良さそうかなと思います（nowInfoWindowは先頭で宣言を追加してくださいね）。

が、新しい変数を使いたくなければ、おとなしくループするしかないかも・・・
ただし、ループの場合、オブジェクトの中身が多くなればなっただけ処理が重たくなっていく可能性が高いですので、その点ご注意を。。。

Comments

[pegy]

ありがとうございます。仰る通り順番を変えるだけで実装することができました！
さて、今回の件に関しては、close()メソッドが表示を前提にしているという仕様であるということかと思うのですが、どのようにしてその答えにたどり着いたのがもしよければご参考にご教示いただけませんでしょうか？
Google Map APIのインストラクションを読んでもわからず、またエラー出力もないのでお手上げ状態だったのですが、どのようなアプローチやプロセスでこういった状況から原因にたどり着くことができるのがをぜひ勉強をさせていただきたく、よろしくお願い申し上げます。

[pegy]

また、ここで質問すべき内容か改めて質問を立てるべきか迷ったのですが、自分はマーカーやインフォウィンドウについてそれぞれすべてユニークなものを割り当てているのでオブジェクトの中に入れて添字であるk1やk2と言ったものを割り当てるとともにすべてのマーカーやウィンドウを処理したい場合にはオブジェクトの中身をループ処理させています。一方で特定のマーカーやインフォウィンドウを処理したい場合にはk1を指定すると言った具合です。

ここで、 markerEvent(i,j)関数を作成した通り、それぞれのマーカーをクリックしたらそれぞれにユニークなインフォウィンドウが開きます、またその際に既に開いているwindowを閉じたい（開いているウィンドウは常に一つという状態にしたいと考えております。

function markerEvent(i,j){
marker[mObjKeys[i]][j].addListener('click', function() { // マーカーをクリックしたとき
　　　　 /*infowWIndow[mObjKeys[i]][j]以外のすべての吹き出しをclose()*/
infoWindow[mObjKeys[i]][j].open(map,marker[mObjKeys[i]][j]); // 吹き出しの表示
});
}
として吹き出し表示の間にclose()を入れたいのですが、上述の都合でそれぞれのマーカーに固有のインフォウィンドをループでつけているため通常であればopenする前のif(infowindow) infowindow.close();のようなことができません。
　・一つ表示したら既に表示しているインフォウィンドウはclose()したい
　・ただし、インフォウィンドウはそれぞれ添字を割り当てられた複数種類存在する
と言う場合、これをうまく実装するアイデアが思い浮かばず、もし思いつくものがあればお知恵をいただければ嬉しいです。

重ねて申し訳ございませんが、
よろしくお願い申し上げます。

[pegy]

上記の２つ目の質問についてですが、ループ処理の中で全く別のループ処理を入れることで実装できました。
ただ、すごく読み取りづらいコードで深いループ処理なので、この実装方法が本当に適切であるのかとても自分で懐疑的です。。
そもそもインフォウィンドウについて複数のマーカーがある場合、オブジェクトを作って要素を与えて個別に割り当てるようなやり方（infowindow[mObjKeys[i]][j]）の記事は探してもあまり出てこないためちょっと自分の考え方自体を疑っています。
一応、このようなケースで実装できたコードは下記の通りです。
markerEvent(i,j)
function markerEvent(i,j){
marker[mObjKeys[i]][j].addListener('click', function() { // マーカーをクリックしたとき
var keys =Object.keys(infoWindow)
var keylen =keys.length
for (var k = 0; k < keylen; k++) {
for (var l = 0; l < Object.keys(infoWindow[keys[k]]).length; l++) {
infoWindow[keys[k]][l].close();//一旦すべてのinfowindowオブジェクトに含まれる要素　をループにより非表示とする
}
}
infoWindow[mObjKeys[i]][j].open(map,marker[mObjKeys[i]][j]); // 吹き出しの表示
});
}