title: Google Maps Spiderfying Markers & Adding Listeners
body: <p>I'm trying to Spiderfy my markers and adding listeners to them. The Spidefying works fine that means I get the overlapping markers spiderfied but the problem is that I can't seem to figure how to add listeners to these markers. In other words I have tried the following:</p>
  
  <ul>
  <li>Putting the <code>oms.addListener()</code> in a loop. This way, upon clicking on a marker would open all <code>infoWindow</code>s on the same marker which isn't delightful.</li>
  <li>Putting the <code>oms.addListener()</code> outside the loop like the example on the OMS Git repo.
  <a href="https://github.com/jawj/OverlappingMarkerSpiderfier/blob/gh-pages/demo.html" rel="nofollow">https://github.com/jawj/OverlappingMarkerSpiderfier/blob/gh-pages/demo.html</a>. This way all the markers have the same <code>infoWindow</code> which is the last one from the loop.</li>
  </ul>
  
  <p>This is my code:</p>
  
  <pre><code>var iw = new google.maps.InfoWindow();
  var oms = new OverlappingMarkerSpiderfier(carte, {keepSpiderfied:true});
  oms.addListener('click', function(marker){
      iw.setContent(content);
      iw.open(carte, marker);
  });
  var markers =[];
  var bounds = new google.maps.LatLngBounds();
  if (response.length != 0) {
      for (var i = 0 ; i &lt; response.length; i++) {
          var loc = new google.maps.LatLng(response[i].latlong[0], response[i].latlong[1]);
          bounds.extend(loc);
          var lemarqueur = new google.maps.Marker({
              position: loc,
              title: response[i].title
          });
          content = '&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="'
          +response[i].image+'"/&gt;&lt;/td&gt;&lt;td&gt;&lt;p style="font-size: 13px"&gt;'
          +response[i].title+'&lt;/p&gt; &lt;p style="font-size: 10px"&gt;&lt;b&gt;Artists:&lt;/b&gt; '
          +response[i].artist+'&lt;br&gt;&lt;b&gt;Date:&lt;/b&gt; '+response[i].startDate+'&lt;br&gt;'
          +response[i].address.name +' '+response[i].address.street + '&lt;br&gt;'
          +response[i].address.postalcode +', '+response[i].address.city +', '
          +response[i].address.country
          +'&lt;br&gt;&lt;a target="_blank" href =' 
          +response[i].url+'&gt;More info&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
  
          oms.addMarker(lemarqueur);
          markers.push(lemarqueur);
      };
      carte.fitBounds(bounds);
      var markerCluster = new MarkerClusterer(carte, markers);
      markerCluster.setMaxZoom(15);
      markerCluster.setGridSize(40);
      google.maps.event.addDomListener(window, 'load', initialiser);
  </code></pre>
  
  <p>So I would like to know where should I put the <code>addListener()</code> block?</p>
  
  <p>This what I have used before in the loop, using <code>google.maps.event.addListener()</code>, which worked fine:</p>
  
  <pre><code>google.maps.event.addListener(lemarqueur, 'click', function() {
      InfoWindow.open(carte, lemarqueur);
  });
  </code></pre>
  
  <p>I hope the question is clear enough,<br>
  Thanks in advance.</p>