Dynamic content in Magnific popup from button in infobox attached to Google Maps marker

Question

I need to load different content into a Magnific-popup which opens when clicking buttons inside infoboxes attached to markers in Google Maps.

I plan to list the content in an array outside the magnificPopup function (see below) that defines all the markers with corresponding content. How do I call the right content into the magnific-popup? Do I target the marker, the button or the infoBox? ...and how?

  window.google.maps.event.addListener(infoBox, "domready", function () {
  $('.open-popup').on('click', function () {
  $.magnificPopup.open({
    items: 
      {
        src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      }
  });
  });
});

A working example of where I am at is here >> http://jsfiddle.net/asier_adq/JdWmm/4/

Thanks in advance for any pointers.

Answer 1

Solved! In this case Infoboxes are the key to linking a click to a marker. So given that var ib = new InfoBox();

Then, inside a function that attaches infoboxes to the markers I add a new property 'num' to the 'ib' object and define it by each markers 'i' variable. ib.num = i;

Then I can use it inside the magnificPopup function to call for the triggered marker's values I have stored in an array. markerData[ib.num][7]

The new script:

window.google.maps.event.addListener(ib, "domready", function () {
  $('.open-popup-photo').on('click', function () {
      $.magnificPopup.open({
              items: {
              src: markerData[ib.num][7] 
             },
          type: 'image' // this is default type
         });
    });
});