InfoBox basically acts like InfoWindow (Google Maps default solution to popup overlays), however, it is a lot more flexible and has many advance features that helps with styling the box. It does this by extending and using the Google Maps OverlayView class.

Handling of Events

One of the InfoBox options is enableEventPropagation, and if set to true it mimics the behaviour of a map label, where all events will be sent Google Maps for handling meaning that if you have a click event inside InfoBox, it will not be triggered. Instead a Google Maps click event will be triggered for the position underneath InfoBox. If enableEventPropagation is set to the default false, ideally the events should not propagate to the Map and should work as expected in the InfoBox. However, this isn’t the case some of the time.

We have recently worked on a project that had a click event on a map. Clicking on a point would clear any markers and search the radius around the position that was clicked. It would then place pins on the results and close all open InfoBoxes.

We clustered multiple map results together, and when an icon is selected, a carousel cycles through the results. When the carousel arrow is clicked to display the next result, this propagates through to the map and makes a new radius search on that point, clearing all the markers and any open InfoBox. We came across the issue where setting enableEventPropagation to false didn’t work as the click event was still propagating to the map.

Solution

If setting enableEventPropagation to false works and solves your problem then great! However, if somehow there are still problems with events like we encountered, this may be a possible solution. You can add event listeners to InfoBox actions, like when content is change, dom is ready or InfoBox is closed. The one we are interested in is domready. This event is triggered when the InfoBox div is attached to the rest of the dom.

infobox= new InfoBox();

infobox.addListener("domready", function() {
   /*
    * event logic
    */
  $(".selector").on("click", function() { 
   // selector click logic
  });
});

An additional problem we ran into was multiple bindings and InfoBox window,
simply modify your Google Maps event listener on the marker and add the following:

infobox.close();

Putting it all together looks like this:

infobox= new InfoBox();
google.maps.event.addListener(marker, "click", function() {
  infobox.close();
  infobox.open(map, this);
  infobox.addListener("domready", function() {
    /*
     * event logic
     */
    $(".selector").on("click", function() { 
     // selector click logic
    });
  });
});