Set map marker title from array - sencha-touch

Question

I am trying to create map markers from an array by using geocoding. I store the addresses on an array as well as the addresses' title. problem is in my loop, the title is being set to the last value of my last array although the markers are being set correctly from the addresses in the array. here is my code:
maprender : function (comp, map) {
new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
map: map
});
var names = new Array("ABC","DEF","GHI"),
mapAdd = new Array();
mapAdd[0] = "Address 1";
mapAdd[1] = "Address 2";
mapAdd[2] = "Address 3";
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < mapAdd.length; i++) {
var lat = 0,
lng = 0,
x = names[i];
geocoder.geocode({
'address': mapAdd[i]},
function (results,status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
console.log(lat + " " + lng);
new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: x,
map: map
});
console.log(x);
}
}
});
}
}
the title is returning "GHI" on all of the markers.

Answer 1

Based on http://blog.jbrantly.com/2010/04/creating-javascript-function-inside.html
Try it this way
function geocode(i) {
var lat = 0,
lng = 0,
x = names[i];
geocoder.geocode({
'address': mapAdd[i]},
function (results,status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
console.log(lat + " " + lng);
new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: x,
map: map
});
console.log(x);
}
}
});
}
for (var i = 0; i < mapAdd.length; i++) {
geocode(i);
}
Hope this helps