2

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');
    }
});
user3032973
  • 415
  • 2
  • 8
  • 26

0 Answers0