I'm trying to use Shadowbox.js
inside multiple InfoWindow
:
function initialize() {
//create the Map
var map = new google.maps.Map(...);
//create the Markers
var marker = new google.maps.Marker(...);
var marker2 = new google.maps.Marker(...);
//create the InfoWindow
var infoWindow = new google.maps.InfoWindow();
//link the Markers to the InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<a href="http://placehold.it/200x200.jpg" rel="shadowbox">Working shadowbox link</a>');
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker2, 'click', function() {
infoWindow.setContent('<a href="http://placehold.it/300x150.jpg" rel="shadowbox">Broken shadowbox link</a>');
infoWindow.open(map, marker2);
});
//enable Shadowbox
google.maps.event.addListener(infoWindow, 'domready', function() {
Shadowbox.init({
overlayOpacity: 0.8
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
As you can see, I've successfully made it work, but only for the first InfoWindow
.
This seems to be caused by my event attachment, I'm using domready
:
google.maps.event.addListener(infoWindow, 'domready', function() {});
I can't find another way to "reinit" Shadowbox for each InfoWindow
.
Any advice ?
As usual, I find the solution I'm searching for just a few minutes after writing my question...
To get Shadowbox
working on every InfoWindow
: you need to call Shadowbox player manually.
Use a custom class instead of rel=shadowbox
:
<a href="http://placehold.it/200x200.jpg" class="dyn-shadowbox">
Shadowbox link
</a>
Every time domready
is triggered on an InfoWindow
, manually attach an event listener to every .dyn-shadowbox
link :
google.maps.event.addListener(infoWindow, 'domready', function() {
var dynlinks = document.getElementsByClassName('dyn-shadowbox');
var n = dynlinks.length;
for (var i = 0; i < n; i++) {
var link = dynlinks[i];
link.removeEventListener('click');
link.addEventListener('click', function(ev) {
ev.preventDefault();
Shadowbox.open({
link: link,
content: link.getAttribute('href'),
player: 'img',
title: ''
});
});
}
});