Создайте только один InfoWindow в Google Maps API v3

Ответ 1

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

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

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

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

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

Ответ 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);
  });
}

Ответ 3

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

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);                 
}

Ответ 4

немного поздно, но мне удалось открыть только одно окно, открывающее глобальную переменную maken infowindow.

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

затем внутри списка

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

infowindow.open(map, this);

Ответ 5

Объявите globar 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);
      });

Ответ 6

Вам нужно отслеживать свой предыдущий InfoWindow объект и вызывать метод закрытия на нем, когда вы обрабатываете щелчок событие на новом маркере.

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

Ответ 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(), вместо этого вызывается функция return. Также удобно передавать infoBoxOptions только один раз!

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

InfoBoxOptions

Ответ 8

Решил это так:

    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);

Ответ 9

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

• Создайте глобальный массив для хранения всех infoWindows

  var infoWindows = [];
  

• Храните каждый новый infoWindow в массиве сразу после infoWindow = new...

  infoWindows.push(infoWindow);
  

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

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

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

Привет,

Ответ 10

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