javascript - Google Maps geokodning och markörer i loop

Jag är helt förvirrad här. Jag har en lista med objekt som alla innehåller en plats. Jag letar upp denna plats med google.maps.geocoder och därefter placerar jag en markör för den platsen på en karta.

Men av någon anledning visas bara en markör. Jag antar att detta har att göra med problemet med closures som jag har sett i andra trådar här, men jag verkar bara inte kunna tillämpa lösningen på det jag har.

Min kod är som följer:

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);
  }

All hjälp uppskattas.

Uppdatering: För att undvika closures i loopar som föreslogs i första svaret, har jag ändrat koden till detta:

//This is the entry
function codeLocations(list, map) {
  for (var i = 0; i < 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);
  });
}

Enligt loggutskrifterna har jag nu de korrekta objekten på de korrekta platserna, vilket betyder att objektet och platsobjekten är olika varje gång markören sätts, men jag får fortfarande bara en markör på min karta. Hur kan detta vara?

Svar #1

Skapa inte closures i loopar. Det fungerar bara inte. Detta kan vara en lösning på problemet:

  function callback() {
    return function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        addMarker(map, item, results[0].geometry.location);
      } else {
        console.log("Geocode failed " + status);
      }
    };
  }

  for (var item in list) {
    var geocoder = new google.maps.Geocoder();
    var geoOptions = {
      address: item.location,
      bounds: bounds,
      region: "NO"
    };
    geocoder.geocode(geoOptions, callback());
  }