Google Maps Geocoding and append a div in 2 loops geocode - google-maps-api-3

Question

I'm completely lost.
I have my html form, where I can write a city.
When the form is send, a data array is send in a each loop, below is the code :
geocoder = new google.maps.Geocoder();
$.each(data['list'],function(i,el)
{
var address = el.address1+','+el.city+' '+el.zipcode;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var getZipCode = $("#zipcode").val();
var getCity = $("#city").val();
geocoder.geocode( { 'address': getCity+' '+getZipCode }, function(resultsTwo, statusTwo) {
if (status == google.maps.GeocoderStatus.OK) {
var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(results[0].geometry.location, resultsTwo[0].geometry.location);
var distanceMiles = distanceKm/1000*0.621371;
str = str +'<article><div class="leftDesc"><header><h3><span class="letter">'+alphabet[i]+'.</span>'+el.store_name+'</h3></header>';
str = str +'<div class="addressEnonce">Address:</div><div class="addressBig"><p class="address">'+el.address1+'</p>';
/*str = str +'<p>'+el.address2+'</p>';*/
str = str +'<br /><p class="city">'+el.city+'</p>';
str = str +' <p class="zipcode">'+el.zipcode+'</p>';
str = str +' <p class="state">'+el.state+'</p></div></div>';
str = str +'<div class="rightDesc"><p class="distance">Distance: '+distanceMiles+' Miles</p>';
str = str +'<p>'+el.description+'</p></div>';
str = str + '<p>Show on Map</p>';
if((i+1) < data['list'].length){
switch(i % 4){
case 0:
str = str +'<img src="img/line.png" >';
break;
case 1:
str = str +'<img src="img/line.png" >';
break;
case 2:
str = str +'<img src="img/line.png" >';
break;
}
}
str = str +'</article>';
tweets.append(str);
}
});
}
});
}) })
So the code is good, for Washington by example, I will have 3 items showed, also I want have 2! The first item is in double one =7
I think the problem is I must to put a callback function, because this is the asynchronous method in geocodes loops which cause the trouble... But how please ?!

Answer 1

The fact that it is asynchronous is the problem. You need to use a closure. Here's an example:
$.each(data['list'],function(i,el) {
var address = el.address1+','+el.city+' '+el.zipcode;
geocoder.geocode( { 'address': address}, (function(address1, city, zipcode) {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
geocoder.geocode( { 'address': city+' '+zipcode },
function(resultsTwo, statusTwo) {
// ...
});
}
};
})(el.address1, el.city, el.zipcode));
});