アイスコールド コカ・コーラ 全国版マップは、アイコンを押したら店舗情報を表示するようにしています。
ただ、アイコン1を押してからアイコン2を押しても、アイコン1のInfoWindowが閉じない状態でした。そこで、すでにInfoWindowが開いていたら閉じる実装を入れました。
忙しい人向け
currentInfoWindow で現在開いているInfoWindowを保持し、新しいマーカーをクリックしたときに close() してから次を open() すれば解決します。
問題発生時のファイル構成（例）
src/
└─ views/
└─ map/
└─ index.vueマーカーのクリックイベント内でInfoWindowを開く実装にしていました。
発生環境
- Vue:
3.4.30 - Google Maps JavaScript API
※ Vueのバージョンで、vue-cliのバージョンではありません。
1. この記事でわかること
- InfoWindowが閉じずに残る原因
currentInfoWindowを使ったシンプルな対処- 実運用で使いやすいクリック時の処理順
2. 症状
- アイコン1を押したあとにアイコン2を押すと、アイコン1のInfoWindowが残る
- 複数のInfoWindowが同時に見える
3. 前提条件
- 複数マーカーを表示している
- マーカークリックでInfoWindowを開いている
※ 実装位置はコンポーネント構成により環境依存の可能性があります。
4. 原因
- 新しいInfoWindowを開く前に、既存InfoWindowを閉じる処理がなかった
- 現在どのInfoWindowが開いているかを保持していなかった
5. 対処手順
手順1: 現在開いているInfoWindowを保持する変数を用意する
let currentInfoWindow = null; // 現在開いている情報ウィンドウを追跡する変数手順2: マーカークリック時に古いInfoWindowを閉じる
const infoWindow = new google.maps.InfoWindow({ ... }); // 情報ウィンドウの内容
marker.addListener("click", () => {
// 古い情報ウィンドウを閉じる
if (currentInfoWindow) {
currentInfoWindow.close();
}
// 新しい情報ウィンドウを表示
infoWindow.open(vm.map, marker);
// 現在の情報ウィンドウを更新
currentInfoWindow = infoWindow;
});currentInfoWindow を使い、すでに情報ウィンドウが開かれていたら close() してから新しいウィンドウを開く、というシンプルな実装です。
手順3: 挙動をローカルで確認する
実装自体はシンプルですが、新しいInfoWindowを開く際に古いウィンドウを閉じられるのは地味に便利でした。
現時点ではローカル確認のみで、本番反映はこれからです。
実際に動かしてみた映像
アイスコールド コカ・コーラ 全国版マップ
全国版マップ アイスコールドコカ・コーラ
アイスコールド コカ・コーラを販売しているお店をマップに表示するWEBサイトです。公式サイトだと店舗名と住所だけなので視覚的にとてもわかりづらいですよね。なので視覚的にわかりやすいように、MAPに起こしました。自分用として作りましたが、出先…
icecolamap.com
コメント