title: Google Maps with multiple geocode locations and alerts on click
body: <p>I am trying to create a Google Map with multiple geocode locations and a unique alert for each location.</p>
  
  <p>Eventually, the locations and locations content will be dynamically generated, but right now, I am just trying to get it working with static content.</p>
  
  <p>My map points are appearing properly, however, I am having a problem with the alerts which will not appear with the incrementing variable in place. </p>
  
  <p>As far as I can tell, the var [i] in locationContent[i][0] is not being replaced with a number. </p>
  
  <p><a href="http://jsfiddle.net/rum0gxtw/" rel="nofollow">http://jsfiddle.net/rum0gxtw/</a></p>
  
  <p>When I replace the code with locationContent[0][1] for example, it returns alert1 (on all 3 markers). </p>
  
  <p><a href="http://jsfiddle.net/rum0gxtw/1/" rel="nofollow">http://jsfiddle.net/rum0gxtw/1/</a></p>
  
  <p>I need it to increment so it returns alert1, alert2, alert3 for the respective marker.</p>
  
  <p>I've been staring at the code for hours now trying various things to solve it. I think I am just missing something fundamental. Here is my code:</p>
  
  <pre><code>var locations = [
    ['Loughbourough University', 'LE11 3TU'],
    ['Durham School', 'DH1 4SZ'],
    ['Oxford University', 'OX4 1EQ'],
  ];
  
  // Alert Content
  var locationContent = [
      ['wow1', 'alert1'],
      ['wow2', 'alert2'],
      ['wow3', 'alert3']
  ];
  
  var image = 'icon.png';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(43.253205,-80.480347),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  var geocoder = new google.maps.Geocoder();
  
  for (i = 0; i &lt; locations.length; i++) {
  
      geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
          //alert(status);
          if (status == google.maps.GeocoderStatus.OK) {
  
              //alert(results[0].geometry.location);
              map.setCenter(results[0].geometry.location);
              marker = new google.maps.Marker({
                  position: results[0].geometry.location,
                  icon: image,
                  map: map
              }); 
  
              google.maps.event.addListener(marker, 'click', (function(i) {
                  return function() {
                      alert(locationContent[i][1]);
                  }
              })(i));
  
          }
          else
          {
              alert("some problem in geocode" + status);
          }
      }); 
  }
  </code></pre>
  
  <p>Would highly appreciate if someone could help me out with this.</p>
  
  <p>Thanks.</p>