javascript - Google Maps InfoBox enableEventPropagation -
javascript - Google Maps InfoBox enableEventPropagation -
i using infobox plugin create custom interactive info-windows in google maps. these infowindows users can scroll through list , click on image invoke script. works, issue when enableeventpropagation enabled can click through infobox other markers causes infobox pop up.
does have experience solving 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 clicked, works when enableeventpropagation set 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'); } });
based on similar so question , fixed zooming issue:
just in case you're still working on one, need alter map options turn off panning/zooming when mouse enters infobox. can utilize this:
$(document).delegate("div#ib", "mouseenter", function() { var currentzoom = $scope.mapinstance.getzoom(); themap.setoptions({ draggable: false, scrollwheel: false, maxzoom: currentzoom, minzoom: currentzoom }); $log.log("mouse come in detected"); }); $(document).delegate("div#ib", "mouseleave", function() { themap.setoptions({ draggable: true, scrollwheel: true }); $log.log("mouseleave detected"); });
javascript google-maps google-maps-api-3 infobox
Comments
Post a Comment