title: Add infowindow to looped array of markers on google map using api v3
body: <p>I have an array that is being looped through in js to put custom markers on a google map. I need to add a hidden info window for each marker so that when it is clicked the relevant infowindow is displayed. Currently I am doing the following:</p>
  
  <pre><code>for(var i=0; i&lt;google_map_item.length; i++)
      {
          latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
          bounds.extend(latlon);
          var iconcolor = google_map_item[i].iconColor;
          marker = new google.maps.Marker({
              map: map,
              position: latlon,
              icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&amp;chld=" + (i + 1) + "|"+iconcolor+"|000000",
              type: 'flat',
              icon_color: '#ff0000', 
              label_color: '#ffffff', 
              width: '20', 
              height: '20', 
              label_size: '11',
                              clickable: true
          });
  
          marker.info = new google.maps.InfoWindow({
                          content: '&lt;b&gt;Speed:&lt;/b&gt; knots'
                      });
  
                      google.maps.event.addListener(marker, 'click', function() {
                          marker.info.open(map, marker);
                      });
  
          map.fitBounds(bounds);
      }
  </code></pre>
  
  <p>However this only creates 1 info box that displays no matter which point you click.</p>
  
  <p>Thanks for any help</p>