title: Google Maps geocoding and markers in loop
body: <p>I'm completely puzzled here. I have a list of objects each containing a location. I look up this location using the google.maps.geocoder and afterwards I put a marker for that location on a map.</p>
  
  <p>But for some reason only one marker appears. I guess this has to do with the closures problem I've seen in other threads around here but I just can't seem to apply the solution to what I have.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    map.fitBounds(bounds);
  
    for (var item in list) {
      var geocoder = new google.maps.Geocoder();
      var geoOptions = {
        address: item.location,
        bounds: bounds,
        region: "NO"
      };
      geocoder.geocode(geoOptions, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          addMarker(map, item, results[0].geometry.location);
        } else {
          console.log("Geocode failed " + status);
        }
      });
    }
  
  function addMarker(map, item, location) {
    var marker = new google.maps.Marker({ map : map, position : location});
    marker.setTitle(item.title);
    var infowindow = new google.maps.InfoWindow( {
      content : item.body,
      size : new google.maps.Size(100, 300)
    });
    (function(map, marker) {
      new google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });
      })(map, marker);
    }
  </code></pre>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>Update:</strong> To avoid closures in loops as suggested in first answer, I have changed the code to this:</p>
  
  <pre><code>//This is the entry
  function codeLocations(list, map) {
    for (var i = 0; i &lt; list.length; i++) {
      console.log("Looping " + list[i].location);
      var geocoder = new google.maps.Geocoder();
      var geoOptions = {
        address: list[i].location,
        bounds: getBounds(),
        region: "NO"
      };
      geocoder.geocode(geoOptions, createGeocodeCallback(list[i], map));
    }
  }
  
  function createGeocodeCallback(item, map) {
    console.log("Generating geocode callback for " + item.location);
    return function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log("Geocoding " + item.location + " OK");
        addMarker(map, item, results[0].geometry.location);
      } else {
        console.log("Geocode failed " + status);
      }
    }
  }
  
  function addMarker(map, item, location) {
    console.log("Setting marker for " + item.location + " (location: " + location + ")");
    var marker = new google.maps.Marker({ map : map, position : location});
    marker.setTitle(item.title);
    var infowindow = new google.maps.InfoWindow( {
      content : item.body,
      size : new google.maps.Size(100, 300)
    });
    new google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
  }
  </code></pre>
  
  <p>According to the log statements, I now have the correct objects at the correct places, meaning the item and location objects are different for every time the marker is set, but I still only get one marker on my map. How can this be?</p>