Откройте только одно информационное окно в Google Maps API v3

Question

Мне нужно, чтобы на моей карте Google было открыто только одно информационное окно.Мне нужно закрыть все остальные информационные окна, прежде чем я открою новое.

Кто-нибудь может показать мне, как это сделать?

Answer 1

Вам нужно создать только один InfoWindow объект, сохраните ссылку на него и повторно используйте if для всех маркеров. Цитирую из документов Google Maps API Docs:

Если вы хотите, чтобы одновременно отображалось только одно информационное окно (как это происходит на Картах Google), вам нужно создать только одно информационное окно, которое вы можете переназначать для разных местоположений или маркеров в зависимости от событий на карте (например, кликов пользователя).

Таким образом, вы можете просто захотеть создать InfoWindow объект сразу после того, как вы инициализируете свою карту, а затем обработаете click обработчики событий ваших маркеров следующие.Допустим, у вас есть маркер под названием someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Затем в InfoWindow должен автоматически закрываться при нажатии на новый маркер без необходимости вызова close() способ.

Answer 2

Создайте свое информационное окно вне области видимости, чтобы вы могли поделиться им.

Вот простой пример:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Answer 3

У меня была такая же проблема, но лучший ответ не решил ее полностью, то, что я должен был сделать в моем заявлении for, - это использовать this, относящееся к моему текущему маркеру.Может быть, это кому-то поможет.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

Answer 4

немного поздно, но мне удалось открыть только одно информационное окно, сделав infowindow глобальной переменной.

var infowindow = new google.maps.InfoWindow({});

затем внутри листнера

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Answer 5

Объявить глобар var selectedInfoWindow; и используйте его для удержания открытого информационного окна:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

Answer 6

Вам нужно отслеживать свои предыдущие Информационное окно объект и позвоните в Закрыть метод на нем, когда вы обрабатываете событие щелчка по новому маркеру.

N.B Нет необходимости вызывать close для объекта общего информационного окна, вызов open с другим маркером автоматически закроет оригинал.Видишь Ответ Дэниела для получения подробной информации.

Answer 7

По сути, вам нужна одна функция, которая хранит ссылку на один new InfoBox() => делегировать событие onclick.При создании ваших маркеров (в цикле) используйте bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox назначается асинхронно и хранится в памяти.Каждый раз, когда ты звонишь bindInfoBox() вместо этого будет вызвана возвращаемая функция.Также удобно передавать infoBoxOptions только один раз!

В моем примере мне пришлось добавить дополнительный параметр к map поскольку моя инициализация задерживается событиями tab.

Варианты информационного ящика

Answer 8

Вот решение, которому не нужно создавать только одно информационное окно для его повторного использования.Вы можете продолжать создавать множество информационных окон, единственное, что вам нужно, это создать функцию closeAllInfoWindows и вызвать ее перед открытием нового информационного окна.Итак, сохраняя свой код, вам просто нужно:

1. Создайте глобальный массив для хранения всех информационных окон

   var infoWindows = [];
   

2. Храните каждое новое InfoWindow в массиве, сразу после InfoWindow = new ...

   infoWindows.push(infoWindow);
   

3. Создайте функцию closeAllInfoWindows closeAllInfoWindows

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. В вашем коде вызовите closeAllInfoWindows() непосредственно перед открытием InfoWindow.

С уважением,

Answer 9

Решил это таким образом:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Answer 10

Карты Google позволяют открывать только одно информационное окно.Таким образом, если вы открываете новое окно, то другое закрывается автоматически.