Проблема с очисткой/удалением информационного окна Google Maps (Custom InfoWindow)

Не могли бы вы взглянуть на эту демонстрацию и сообщить мне, почему я не могу:

1- Чтобы закрыть любой открытый информационный ящик, когда открывается новый

2- Очистить / удалить открытое информационное окно, когда пользователь нажимает кнопку «Очистить»?

Вот код, который у меня есть

$(document).ready(function() {
    var markers = []; // makers array
  var infoBox = null;
    var myOptions = { // map settings
        zoom: 15,
        center: new google.maps.LatLng(38.721759, -9.151692),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);

    var data = [ // map data
    {
        id: 1,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec sed odio dui. Aenean eu leo quam.</span></div><div class="fot"></div>',
        position: {
            lat: 38.721759,
            lng: -9.151692
        }
    },
    {
        id: 2,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>This is a test.</span></div><div class="fot"></div>',
        position: {
            lat: 38.720805,
            lng: -9.146585
        }
    }
    ]

    for (var i = 0; i < data.length; i++) {
        var current = data[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(current.position.lat, current.position.lng),
            map: map,
            content: current.content
        });

        markers.push(marker);

        google.maps.event.addListener(markers[i], "click", function(e) {
              infoBox = new InfoBox({
                latlng: this.getPosition(),
                map: map,
                content: this.content
            });
        });
    }


   function clearMap(){
    for(i=0; i<markers.length; i++){
            markers[i].setMap(null);
        }
            markers = [];   
         infoBox.close();
    }

   $("#clear").on("click",function(){
       clearMap();
    });   
});

Как видите, я уже пробовал

 infoBox.close();

который я получаю Uncaught TypeError: undefined is not a function для .close() Я также попробовал .remove(), который удаляет информационное поле с карты, но при увеличении или уменьшении масштаба окно снова появляется на карте!

для закрытия существующего информационного окна также я попробовал

 if (infoBox) {
            infoBox.close();
      }

в следующей треске, но это тоже не сработало!

google.maps.event.addListener(markers[i], "click", function(e) {
 if (infoBox) {
        infoBox.close();
  }
          infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    });
}

Спасибо,


google-maps google-maps-api-3 infobox
person Suffii    schedule 27.01.2015    source источник
comment
Обновленная скрипта с кодом из вашей ссылки имеет информационные блоки.   -  person geocodezip    schedule 28.01.2015

Ответы (1)


arrow_upward
3
arrow_downward

  1. В вашем информационном окне нет метода .close(), вместо этого используйте .setMap(null).
  2. Если вы хотите иметь только один InfoBox, создайте только один (при первом открытии, так как ему нужна latlng) и переместите его на соответствующий маркер. Требуется написать метод для «перемещения» InfoBox

щелкните прослушиватель, который «перемещает» InfoBox:

google.maps.event.addListener(markers[i], "click", function (e) {
    if (!infoBox) {
        infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    } else {
        infoBox.setOptions({
            map: map,
            content: this.content
        });
        infoBox.setPosition(this.getPosition());
    }
});

/* move the InfoBox
 */
InfoBox.prototype.setPosition = function(latlng) {
    this.latlng_ = latlng;
};

рабочая скрипта

person geocodezip    schedule 27.01.2015