[SOLVED] Google Maps Infobox click through to another marker

Google Maps Infobox click through to another marker

I am attempting to stop events from firing when an infoBox is opened. The issue is when the Infobox is rendering ontop of other markers, users have the ability to click through the InfoBox and click on the markers behind it. Is there a way to prevent this while still being able to click on a marker not behind the infobox?

  dropInfoBox = new InfoBox({
        content: document.getElementById("pinDrop"),
        disableAutoPan: false,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            color: 'white',
            background: '#101010',
            width: "90px"
        },
        infoBoxClearance: new google.maps.Size(1, 1)
    });
    dropInfoBox.open(map, marker);
    $('.infoBox > img').css('height', '');
    $('.infoBox').click(function (evt) {
    evt.stopPropagation();

    });

Solution

Set enableEventPropagation to false.

enableEventPropagation | boolean | Propagate mousedown, mousemove, mouseover, mouseout, mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label.

dropInfoBox = new InfoBox({
    enableEventPropagation: false,
    content: document.getElementById("pinDrop"),
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
        color: 'white',
        background: '#101010',
        width: "90px"
    },
    infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);

code snippet:

var map = null;
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.901458523676155,
      8.381676499999912),
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'Point') {
      var marker = new google.maps.Marker({
        position: e.feature.getGeometry().get(),
        title: e.feature.getProperty('name'),
        map: map
      });
      google.maps.event.addListener(marker, 'click', function(marker, e) {
        return function() {

          var myHTML = e.feature.getProperty('name');
          boxText.innerHTML = "<div style='text-align: center;height: 100px'><b>" + myHTML + "</b><br>This is an InfoBox</div>";
          infobox.setPosition(e.feature.getGeometry().get());
          infobox.setOptions({
            pixelOffset: new google.maps.Size(-140, -20)
          });
          infobox.open(map);
        };
      }(marker, e));
      if (e.feature.getProperty('name') == "Guetersloh") {
        clickMarker(marker);
      }
    }
  });
  layer = map.data.addGeoJson(geoJson);
  map.data.setMap(null);
  google.maps.event.addListener(map, "click", function() {
    infobox.close();
  });
}

function clickMarker(marker) {
  setTimeout(function() {
    google.maps.event.trigger(marker, 'click');
  }, 1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>