Google Maps geokodowanie i markery w pętli

Question

Jestem tu całkowicie zaskoczony. Mam listę obiektów, z których każda zawiera lokalizację. Sprawdzam tę lokalizację za pomocą google.maps.geocoder, a następnie umieszczam znacznik dla tej lokalizacji na mapie.

Jednak z jakiegoś powodu pojawia się tylko jeden znacznik. Myślę, że ma to związek z problemem zamknięcia, który widziałem w innych wątkach, ale nie mogę po prostu zastosować rozwiązania tego, co mam.

Mój kod wygląda następująco:

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

Każda pomoc jest mile widziana.

Aktualizacja: Aby uniknąć zamknięcia w pętli, jak je w pierwszej odpowiedzi, mam zmieniony kod do tego:

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

Według sprawozdania z bali, teraz mam poprawnych obiektów w odpowiednich miejscach , co oznacza, że ​​przedmiot i obiekty lokalizacji są różne za każdym razem, gdy ustawiony jest znacznik, ale nadal otrzymuję tylko jeden znacznik na mojej mapie. Jak to może być?

Answer 1

Nie twórz zamknięć w pętlach. That just won't work. To może być rozwiązanie problemu:

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