Magnific-popup fails to open from button inside Google Maps infoBox

Question

I have an infoBox that opens when clicking on a google maps marker. Inside the infoBox there is a button '#open-popup' that when clicked should to open a magnificPopup modal window but nothing happens.

As a test I have put the same button outside the div containing the google map, which opens the modal window but only on the second click! What is going on?

I have tried all sort of things for days but all have worst side effects.

Any help will be much appreciated.

HTML for button inside 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 for button outside google maps div:

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

Answer 1

Try placing your jQuery click event inside a map event listener, that is set to fire when an infobox is clicked. A map event listener is needed because click events inside a google map are handled by the Google Map API.

So for you, something like:

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

Notice that I updated the selector for your on click event also. You may want to play around with that as the usual on selector syntax wouldn't work in my case, e.g. $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});

The infobox is dynamically added and removed from the dom every time it is shown and closed. So what the function above is essentially doing is, after the new infobox instance has been added to the dom (i.e. is visible), add this new click event to it. Once you close that infobox, it is removed from the dom which also means that the event handler you attached to it is gone also. Which is why we add a new one each time.

I'm sure there's probably a neater solution out there, I just haven't had time to find one!

Also, make sure to keep enableEventPropagation: false in the infobox options so that the click event doesn't get swallowed by Google maps.

UPDATE

Here is a working example: http://jsfiddle.net/gavinfoley/4WRMc/10/

What you really need to be able to open the magnific popup through the API. So the only change I made was changing

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

to

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

And that solved it.

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

    });
});