Issue on Accessing JSON Values in Google Maps Infowindow (infoBox) - google-maps-api-3

Question

Using jQuery Ajax call I am trying to show some Markers and their associated info from database on the Map as:
$(document).ready(function () {
var markers = [];
var infoBox = null;
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(49.241943, -122.889318),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#g-one-1").on("click",function(){
var data = 'data=' + "open";
var reqOne = $.ajax({
type: "POST",
url: "assets/gone.php",
data: data,
cache: false,
dataType: "JSON",
beforeSend: function () {console.log(data);},
complete: function () {console.log("Data Is Sent");}
});
reqOne.fail(function() { console.log( "There is an Error" ); });
reqOne.done(function(data){
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}
});
});
});
The code is working fine until showing the infobox value which I tried to get each of points lat, lng and name by using current.name current.lng and current.lat
in infoBox content as
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
but I am getting same .name , .lng, and .lat in all boxes? As far as I know I have a loop at
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
to assign the lat long values from json to markers but it seems it is not accessible here!
Can yopu please let me know how to fix this

Answer 1

Simple fix using function closure. Replace this code with a call to createMarker(current):
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
where createMarker is:
createMarker(current) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = current.name;
google.maps.event.addListener(marker, "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}