Magnific-popup не открывается с помощью кнопки внутри информационного окна Google Maps

У меня есть информационное окно, которое открывается при нажатии на маркер Google Maps. Внутри информационного окна есть кнопка #open-popup, при нажатии на которую должно открываться модальное окно magnificPopup, но ничего не происходит.

В качестве теста я поместил ту же кнопку за пределами div, содержащего карту Google, которая открывает модальное окно, но только при втором нажатии! Что происходит?

Я пробовал все виды вещей в течение нескольких дней, но у всех были худшие побочные эффекты.

Любая помощь будет высоко ценится.

HTML для кнопки внутри infoBox:

<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>

HTML для кнопки вне div карт Google:

<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>

JS:

myapp.triggerClick = function (){
  google.maps.event.trigger(gmarkers[id],"click")
};

var infoboxOptions = {
             content: ''
            ,disableAutoPan: false
            ,alignBottom: true
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(0, 0)
            ,zIndex: 1000
            ,boxStyle: {
              background:''
              ,opacity: 0.9
             }
            ,closeBoxMargin: "4px 4px 0 0"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1,1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };
var ib = new InfoBox(infoboxOptions);

function createMarker(latlng, html, id) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
        //zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
      ib.setContent(contentString);
      ib.open(map,marker);
    });
    gmarkers[id] = marker;
}

$(document).on('click', '#open-popup', function () {
    $(this).magnificPopup({
      items: {
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
      },
      type: 'image' // this is default type
    });
});

google-maps-api-3 infobox magnific-popup
person asier_js    schedule 05.07.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте поместить событие клика jQuery в прослушиватель событий карты, который срабатывает при нажатии информационного поля. Прослушиватель событий карты необходим, поскольку события кликов внутри карты Google обрабатываются API Карт Google.

Итак, для вас что-то вроде:

window.google.maps.event.addListener(ib, "domready", function () {
    $('#open-popup').on('click', function () {
        $(this).magnificPopup({
          items: {
            src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
          },
          type: 'image' // this is default type
        });
    });
});

Обратите внимание, что я также обновил селектор для вашего события по клику. Вы можете поиграть с этим, так как обычный синтаксис селектора on не будет работать в моем случае, например. $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});

Информационное окно динамически добавляется и удаляется из dom каждый раз, когда оно отображается и закрывается. Таким образом, вышеприведенная функция, по сути, делает следующее: после того, как новый экземпляр информационного окна был добавлен в дом (т.е. стал видимым), добавьте к нему это новое событие щелчка. Как только вы закрываете это информационное окно, оно удаляется из dom, что также означает, что обработчик событий, который вы к нему прикрепили, также исчез. Поэтому мы каждый раз добавляем новый.

Я уверен, что есть более аккуратное решение, просто у меня не было времени его найти!

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

ОБНОВЛЕНИЕ

Вот рабочий пример: http://jsfiddle.net/gavinfoley/4WRMc/10/

Что вам действительно нужно, чтобы открыть всплывающее окно через API. Так что единственное изменение, которое я сделал, было изменение

$(this).magnificPopup({...});

to

$.magnificPopup.open({...});

И это решило это.

window.google.maps.event.addListener(ib, "domready", function () {       
    $('.open-popup').on('click', function () {
        // Open magnificPopup through API
        // See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
        $.magnificPopup.open({
            items: {
                src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
            },
            type: 'image' // this is default type
        });

    });
});
person GFoley83    schedule 09.07.2013
comment
Спасибо, вроде заработало... теперь поп-ап открывается только секунду и дальше клики. Первый щелчок не работает для каждого из информационных окон. - person asier_js; 10.07.2013
comment
@asier_js Настройте JSFiddle или Plunker, и я посмотрю. - person GFoley83; 11.07.2013
comment
@asier_js Я думаю, вы забыли включить свой код для великолепного всплывающего окна, поскольку JSFiddle - это просто пример информационного окна? - person GFoley83; 11.07.2013
comment
Извини за это. Впервые использую jsfiddle и не сохранил! Вот это jsfiddle.net/asier_adq/4WRMc/8. - person asier_js; 15.07.2013
comment
@asier_js Я обновил свой ответ рабочим решением. Кроме того, я предлагаю вам удалить лишний пост, который вы сделали ниже, со своим скриптом; это не нужно, поскольку вы предоставили JSFiddle, и это противоречит правилам стека. - person GFoley83; 16.07.2013
comment
Отлично, работает. Большое спасибо! (и удалили мой второй ответ) - person asier_js; 16.07.2013
comment
@asier_js Не беспокойтесь, приятель, рад помочь. - person GFoley83; 16.07.2013