title: How can I remove all instances/custom objects created of one class?
body: <p>I need some help with JavaScript and Google Maps API.</p>
  
  <p>I have a Google Maps map on my website which shows markers, which in turn show a custom <code>InfoBox</code> when clicked on.</p>
  
  <p>When a marker is clicked, a new object is created for this <code>InfoBox</code>:</p>
  
  <pre><code>google.maps.event.addListener(marker, 'click', function() {
      infoBox = new InfoBox({id: id, content: description, latlng: marker.getPosition(), map: map});
  });
  </code></pre>
  
  <p>When a visitor clicks two markers consecutively, he is faced with two <code>InfoBox</code>s. I run two lines of code that hide the <code>InfoBox</code>s when a users clicks away in the map or when they click the cross in the upper right corner:</p>
  
  <pre><code>google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
  google.maps.event.addDomListener(map, 'click', removeInfoBox(this)); 
  </code></pre>
  
  <p>What I would like to happen is that when a user clicks on a marker, all previous markers will get hidden (so after each click on a marker, there would only be one previous <code>InfoBox</code> to be hidden).</p>
  
  <p>I'm struggling to get this done. If I create a <code>DomListener</code> on all markers with the 'click' event, I never get an <code>InfoBox</code> to pop up. If I put <code>removeInfoBox(this);</code> before creating a new object of <code>InfoBox</code> I also never get shown an <code>InfoBox</code>.</p>
  
  <p>Where and how would be the proper way to prevent more than one <code>InfoBox</code> from showing up?</p>