Googlemaps InfoBox target close button with jQuery

Question

I've got a google maps for EE map with multiple pins working. I've also set it to add a class to a div further down the page when clicking a pin.

However what I need is to remove that class when closing the infobox. Unfortunately I am unable to figure out how to target the close button as the inspector doesn't appear to work over the map. I've tried toggleClass but that only works when you click the pin again, not close the infobox.

My current working code is here, the jquery is at the bottom in the exp:gmap:event tag pair - I've added a second event tag pair targetting the closeclick event, but it's not working.

          {exp:channel:entries channel="branches" disable="member_data|pagination|categories|category_fields" limit="300"}

           {!--{branch_location id="map"}--}

           {exp:gmap:marker 
            id="map" 
            latitude="{branch_latitude}" 
            longitude="{branch_longitude}"
            icon="/images/map-pin.png"
            offsetY="-40"
            offsetX="0"
            geocode="false"
            infobox="true" 
            clustering="true"
            class="ui-infobox-dark"
            closeBoxMargin="5px"
          }
              <div class="ui-infobox-content entry{entry_id}">
                <h4>{title}</h4>
                {branch_address} <br>
                {branch_city} {branch_province} <br>
                {branch_postcode} <br>
                Work Phone: {branch_phone} <br>
                Toll Free: {branch_toll_free} <br>
                Fax Number: {branch_fax}
              </div>
            {/exp:gmap:marker}

            {!--
            // add active class to branch card to highlight it.
            --}
            {exp:gmap:event id="map"}
              $('.block article.entry{entry_id}').addClass('active');
            {/exp:gmap:event}

{exp:gmap:event id="map" event="closeclick"}
    $('.block article.entry{entry_id}').removeClass('active');
{/exp:gmap:event} 

          {/exp:channel:entries}

Answer 1

Forgot about this Question until Laurance commented. Here is my working code:

     {exp:gmap:marker 
  id="map" 
  latitude="{branch_latitude}" 
  longitude="{branch_longitude}"
  duplicate_markers="false"
  icon="/images/map-pin.png"
  geocode="false" 
  clustering="true"
  latitude="{branch_latitude}" 
  longitude="{branch_longitude}"
  limit="100"
  entry_id="{entry_id}"

  infobox="true"
  offsetY="-40"
  offsetX="0"
  class="entry-{entry_id} ui-infobox-dark"
  closeBoxMargin="5px"
}
  <div class="ui-infobox-content">
    <h4>{title}</h4>
    {branch_address} <br>
    {branch_city} {branch_province} <br>
    {branch_postcode} <br>
    Work Phone: {branch_phone} <br>
    Toll Free: {branch_toll_free} <br>
    Fax Number: {branch_fax}
  </div>
{/exp:gmap:marker}

{!--
// add active class to branch card to highlight it.
--}
{exp:gmap:event id="map"}
 $('.branch-block article.entry{entry_id}').addClass('active'); 


 $( ".ui-infobox-dark img" ).click(function() { 
    $('.branch-block article').removeClass('active'); 

    console.log('was clicked');

  }); 

 {/exp:gmap:event} 

{exp:gmap:event id="map" event="closeclick"}
   $('.branch-block article.entry{entry_id}').removeClass('active');
{/exp:gmap:event}


{!--
  http://devot-ee.com/add-ons/support/google-maps/viewthread/14346#47060
--}
<script>
  for(var x in map_markers) {
   var marker = map_markers[x];
   var id = marker.entry_id;

   // If this console.log doesn't return an entry_id, you need to
   // pass the entry_id using a parameter to your exp:gmap:marker tag.
   console.log('entry_id:', id);

   if(marker.window) {
    google.maps.event.addListener(marker.window, 'closeclick', function() {
     // $('.branch-block article.entry'+id).removeClass('active');
     $('.branch-block article').removeClass('active');
     console.log('this was clicked');
    });
   }
  } 
</script>