I am using the InfoBox plugin to create custom interactive info-windows in google maps. From these infowindows users can scroll through a list and click on an image to invoke some script. Everything works, the issue is when enableEventPropagation is enabled I can click through the infobox to other markers which causes another infobox to pop up.
does anyone have experience solving this problem?
InfoWindow = new InfoBox({
content: document.getElementById("infobox-wrapper"),
disableAutoPan: true,
enableEventPropagation: true,
zIndex: null,
pixelOffset: new google.maps.Size(-300, -0),
closeBoxURL: '../assets/images/info-close.png',
boxStyle: {
color: 'white',
background: '#101010',
width: "600px",
height: "400px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
Removing infobox
function removeInfoWindow() {
$('.infoBox').remove()
}
Javascript invoked when image within infobox is clicked, only works when enableEventPropagation is set to true
$(document.body).on('touchstart', '.infoBox img', function () {
if ($(this).attr('val') == 'off') {
//turn on
$(this).attr('val', 'on');
$(this).attr('src', '../assets/images/check.png');
} else {
//turn off
$(this).attr('val', 'off');
$(this).attr('src', '../assets/images/uncheck.png');
}
});