Карта Google с инфо-пузырьками

Question

На этой странице , я показываю карту Google с InfoBubble s, которые появляются над маркерами карты. Инфо-пузыри открыты изначально. Если вы закроете их, вы можете снова открыть их, нажав на маркер. Я хотел бы, чтобы инфо-пузыри были закрыты изначально. Соответствующая функция (упрощенная для удаления ненужных вещей):

addMarker = function(festivalData, hasPopup) {

    var map = this._map;

    this.marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map
    });

    if (hasPopup) {
        var infoBubble = new InfoBubble({
            map: map,
            content: "<a href='" + festivalData.url + "'>" + festivalData.name + "</a>",
            hideCloseButton: false,
        });

        infoBubble.open(map, this.marker);

        var infoBubbleHandler = function(bubble) {
            return function() {
                if (!bubble.isOpen()) {
                    bubble.open(map, this.marker);
                }
            }
        }(infoBubble);

        google.maps.event.addListener(this.marker, 'click', infoBubbleHandler);
    }
}

Я ожидал, что, удалив строку

infoBubble.open(map, this.marker);

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

Answer 1

Изменил все ссылки на this.marker на локальную переменную и изменил создание этой функции-обработчика, и она работает так, как я думаю, вы хотите, чтобы она была

addMarker = function(festivalData, hasPopup) {

    var map = this._map;

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map
    });

    if (hasPopup) {
        var infoBubble = new InfoBubble({
            map: map,
            content: "<a href='" + festivalData.url + "'>" + festivalData.name + "</a>",
            hideCloseButton: false,
        });

        //infoBubble.open(map, this.marker);

        var infoBubbleHandler = function() {
            if (!infoBubble.isOpen()) {
                infoBubble.open(map, marker);
            }
        };

        google.maps.event.addListener(marker, 'click', infoBubbleHandler);
    }
}

Answer 2

Это простой способ сделать маркер невидимым в начале и открыть его при нажатии

var myLatLng = new google.maps.LatLng(some_lat, some_lng);
var marker = new google.maps.Marker({
        position: myLatLng,
        map: your_map,
        title: some_title,
        zIndex: some_z_index_int,
        clickable: true
    });

infoBubble = new InfoBubble({
      content: '<div>Some label</div>',
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 4,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 10,
      arrowStyle: 2
    });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {

            infoBubble.open(map, marker);
        }
})(marker, i));

Answer 3

Это странное поведение, я также ожидал бы, что оно будет работать после удаления open call.

От макушки головы - попробуйте закрыть пузырь сразу после его открытия:

infoBubble.open(map, this.marker);
infoBubble.close();