javascript 单击另一个标记时关闭信息窗口

Close infowindow when another marker is clicked

提问by user1292656

I have the following code to open an infowindow when a specific marker is click and it open a window. Does anyone know how to close the previous infowindow when another one is clicked?.

我有以下代码可以在单击特定标记时打开信息窗口并打开一个窗口。有谁知道如何在单击另一个信息窗口时关闭上一个信息窗口？

   google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map1, marker);
        });

回答by Nelson

Just make sure you only create ONE infoWindowin the global scope, like this:

只要确保你只infoWindow在全局范围内创建一个，就像这样：

infoWindow = new google.maps.InfoWindow; //static infoWindow for all your markers
google.maps.event.addDomListener(window, 'load', function() {
   //create your markers here
   google.maps.event.addListener(marker, 'click', function() {
               infoWindow.open(map1, marker); //take care with case-sensitiveness
          });
});

UPDATE:

更新：

• Fix case sensitive spotted by Duncan.
• Illustrate the marker click handlers must be connected after marker creation, both inside page load event.

• 修复 Duncan 发现的区分大小写的问题。
• 说明标记单击处理程序必须在标记创建后连接，都在页面加载事件内。

回答by Baha' Al-Khateib

Create a global variable in your JS file, name it lastOpenedInfoWindow or whatever you want, after that close it before opening a new info window, assign the "lastOpenedInfoWindow" to the currently opened window and so on

在您的 JS 文件中创建一个全局变量，将其命名为 lastOpenedInfoWindow 或任何您想要的名称，然后在打开新信息窗口之前关闭它，将“lastOpenedInfoWindow”分配给当前打开的窗口等等

google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
        return function() {
            closeLastOpenedInfoWindow();
            infowindow.setContent(content);
            infowindow.open(map, marker);
            lastOpenedInfoWindow = infowindow;
        };
    })(marker, makrerdata[i], infowindow));
}


function closeLastOpenedInfoWindow() {
    if (lastOpenedInfoWindow) {
        lastOpenedInfoWindow.close();
    }
}

回答by duncan

infowindow.close()will close an open infowindow. It depends on how you're creating your infowindows though - do you only have one infowindow variable to handle all, or are you creating multiple infowindow objects for each marker? Hard to be more specific without seeing more of your code at this stage.

infowindow.close()将关闭一个打开的信息窗口。这取决于您如何创建信息窗口 - 您是否只有一个信息窗口变量来处理所有信息，或者您是否为每个标记创建了多个信息窗口对象？在这个阶段如果没有看到更多的代码，很难更具体。

回答by Andy Bajka

In order to close the previous infowindow when another one is clicked, you need to make sure the following code is in the function initialize() loop.

为了在单击另一个信息窗口时关闭前一个信息窗口，您需要确保以下代码在函数 initialize() 循环中。

infoWindow = new google.maps.InfoWindow;

infoWindow = 新的 google.maps.InfoWindow;

回答by MimiS

I had this problem too, here is what I did:

我也有这个问题，这是我所做的：

function initMap() {
//---------------------map
var options = {
    zoom: 12,
    center: {
        lat: 43.5963020324707,
        lng: 1.4221688508987427
    }
}
var map = new google.maps.Map(document.getElementById('map'), options);    
//--------------- Adresses
let addresses = [
    "23 Quai Lucien Lombard",
    "18 Place Laganne",
    "266 Avenue de Fronton",
    "3 Impasse du Professeur Nougayrol",
    "1 Allées Charles de Fitte",
    "5 Avenue de Casselardit",
    "84 Chemin des Argoulets"
];

// ---------------- globales
let markers = []
let infowindowArray = []

// ---------------- Adresses Géocoder
geocodeAdresses(addresses)
    .then(res=>{

        geocodeAdressesArray = res;         
        return geocodeAdressesArray
    })
    .then(geocodeAdressesArray=>{
    // --------------create markers
        for (let i = 0; i < geocodeAdressesArray.length; i++){  

            let marker = new google.maps.Marker({ 
                'id': geocodeAdressesArray[i].id,
                'adresse': geocodeAdressesArray[i].adresse,
                'position':{
                    'lat':geocodeAdressesArray[i].lat,
                    'lng':geocodeAdressesArray[i].lng
                }
            });
            markers.push(marker)// push globale             
            marker.setMap(map)
    // ---------- create infowindows

            let infowindow = new google.maps.InfoWindow({
                'position' : marker.position,                
                'content': marker.adresse,
            });
            infowindowArray.push(infowindow) // push globale
        }
    // ---------------close infowindows on clic 
        for (let i = 0; i < markers.length; i++) {
            let marker = markers[i];

            marker.addListener( 'click', ()=>{                  

                for (let j = 0; j < infowindowArray.length; j++) { 
                    let infowindow = infowindowArray[j];
                    infowindow.close(map, marker)
                }
                let currentInfowindows = infowindowArray[i]
                currentInfowindows.open(map)               
            })
        }
    })

}

}

For my geocodeAdresses (addresses), this is a function that I created from google geocode API.

对于我的 geocodeAdresses（地址），这是我从 google geocode API 创建的一个函数。

I hope it will help

我希望它会有所帮助

回答by Yergalem

Make Sure you've one instance of InfoWindow - new google.maps.InfoWindow. Therefore, everytime the marker is clicked open that only one instance declared either in your initialize method or globally declared InfoWindow.

确保您有一个 InfoWindow 实例 - 新的 google.maps.InfoWindow。因此，每次单击标记打开时，只有一个实例在您的 initialize 方法或全局声明的 InfoWindow 中声明。

var infoWindow = new google.maps.InfoWindow
Make sure this infoWindow instantiated only once. Otherwise, you'll have multiple windows open eachtime you click the marker.

var infoWindow = new google.maps.InfoWindow
确保此 infoWindow 仅实例化一次。否则，每次单击标记时都会打开多个窗口。

marker.addListener('click', function () {                                
    infoWindow.setContent(infowincontent);
    infoWindow.open(clntLocMap, marker);
});