MapsJavaScriptAPIでInfoWindowを一つだけ開くようにした

アイスコールドコカ・コーラ全国版マップはアイコンを押したら店舗の情報を表示するようにしているが、アイコン1を押して、アイコン2を押してもアイコン1の情報ウィンドウが閉じないようになってたので、閉じるようにした。

環境情報

vue@3.4.30

※Vueのバージョンでvue-cliのバージョンじゃないよ！

実装はこんな感じ。

let currentInfoWindow = null; // 現在開いている情報ウィンドウを追跡する変数

const infoWindow = new google.maps.InfoWindow({...}); // 情報ウィンドウの内容

marker.addListener("click", () => {
              // 古い情報ウィンドウを閉じる
              if (currentInfoWindow) {
                currentInfoWindow.close();
              }

              // 新しい情報ウィンドウを表示
              infoWindow.open(vm.map, marker);

              // 現在の情報ウィンドウを更新
              currentInfoWindow = infoWindow;
            });

currentInfoWindowの変数を使用し、すでに情報ウィンドウが開かれていたら、close()で情報ウィンドウを閉じてから新しいウィンドウを開くというシンプルな実装。

実際に動かしてみた映像。