Issue on Accessing JSON Values in Google Maps Infowindow (infoBox)

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