title: Google Maps API Passing Variables to the InfoWindow
body: <p>I have the following code that loops through an array of markers;</p>
  
  <p>The array of places:</p>
  
  <pre><code>var map_markers = [['Windsor Road, Salisbury, SP2 7NF &lt;br/&gt; 2nd Line', 'Windsor Road, Salisbury,', 1],['Bishopdown Road, Salisbury, SP1 3DT &lt;br/&gt; 2nd Line', 'Bishopdown Road, Salisbury,', 2],['Gainsborough Close, Salisbury, SP2 9HD &lt;br/&gt; 2nd Line', 'Gainsborough Close, Salisbury,', 3],['Montgomery Gardens, Salisbury, SP2 7UQ &lt;br/&gt; 2nd Line', 'Montgomery Gardens, Salisbury,', 4],['Manor Court, Salisbury, SP1 1LN &lt;br/&gt; 2nd Line', 'Manor Court, Salisbury,', 5],];
  </code></pre>
  
  <p>Obvioulsly all of the above need Geocoding so that I can place a pin for each on the map, I have built the following function for this:</p>
  
  <pre><code>function init_map(map_id, center_address, markers) {
  
      geocoder = new google.maps.Geocoder();
  
      geocoder.geocode( { 'address': center_address, 'region': 'uk' }, function(results, status) {
  
          if (status == google.maps.GeocoderStatus.OK) { 
  
           //Init Map Options
           var mapOptions = {
              zoom: 11,
              center: results[0].geometry.location,
              mapTypeId: google.maps.MapTypeId.ROADMAP
           }
  
           var map = new google.maps.Map(document.getElementById(map_id), mapOptions);
  
           var infowindow = new google.maps.InfoWindow();
  
           var marker, i;
  
           for (i = 0; i &lt; markers.length; i++) {  
  
              var marker_address = markers[i][1];
              var marker_content = markers[i][0];
  
              geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) { 
  
               if (status == google.maps.GeocoderStatus.OK) { 
                  marker = new google.maps.Marker({
                      position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                      map: map
                  });
  
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
  
                      return function() {
                          infowindow.setContent(marker_content);
                          infowindow.open(map, marker);
                      }
  
                      }) (marker, i)); 
  
                  } else {
                      alert("There was a issue getting the property information.")
                  }
              });
           }
  
        } else {
  
          alert("Unable to find address: " + status);
  
        }
  
    });
  }
  </code></pre>
  
  <p>With the above code the markers are placed correctly on the map and when I click a marker the infoWindow does appear, however, it seems to be getting stuck on the looping and only displays the final array element content on all of the markers. Can anyone recommend a fix?</p>