title: Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing
body: <p>My project uses a JSON feed to grab info about earthquakes within a specified latitude and longitude boundary, essentially making a box.  I take this info and turn all the results into markers on a Google map.  I need each marker to also display some additional information, so I'm trying to use the built in InfoWindow objects such that when you click on a marker you open up the tooltip with some information associated with that marker.  However I'm finding that no matter what marker I click, the same infowindow always comes up above the same marker of that group, and I believe it is always the last infowindow created in my loop.  Here's the code.</p>
  
  <pre><code>$.getJSON(url, function(json) {
                      for(var i = 0; i &lt; json.earthquakes.length; i++)
                      {
                          var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng);
                          var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng;
                          var marker = new google.maps.Marker({
                              map: map, 
                              position: pos,
                              title: json.earthquakes[i].eqid
                          })
                          var tooltip = new google.maps.InfoWindow({
                              content: info
                          })
                          google.maps.event.addListener(marker, 'click', function() {
                              tooltip.open(map, marker);
                          });
                          markers.push(marker);
                          tooltips.push(tooltip);
                      }               
                  });
  </code></pre>
  
  <p>markers is an array for all the marker objects on the map and tooltips is another array for storing the infowindows objects.  They're global.</p>