Can't attach multiple infoboxes on multiple markers google maps v3

Question

I have a google map in my phonegap app. I performed a query in my sqlite database and in every row returned, I pushed it in my key-value-pair array. I was able to put markers based on the content of my array. What I am trying to do is attach and infobox for each marker. All markers have their own infowindow, however, the content of each window is the data of the last index in my key-value-pair array. Here is my code

function HotelsQuery(){
 appDB.transaction(function(tx) {
     tx.executeSql("SELECT e.name, e.lat, e.lng, e.tel_num, e.phone_num, e.secondary_num, e.address FROM establishment e INNER JOIN places_cat_categorize p ON e.place_id = p.places_id WHERE p.cat_id = 40",[],function(tx, res) {
      console.log("Returned rows in HotelsQuery= " + res.rows.length);

      var hotels = [];
      for (var i = 0; i < res.rows.length; i++) {
       hotels.push({"name": res.rows.item(i).name , "lat": res.rows.item(i).lat, "lng": res.rows.item(i).lng, "tel_num": res.rows.item(i).tel_num, "phone_num": res.rows.item(i).phone_num, "secondary_num": res.rows.item(i).secondary_num, "address": res.rows.item(i).address});
      }

      console.log('Hotels: ' + hotels[0].name);
      console.log(hotels.length);

      for(var x = 0; x < hotels.length ; x++){
        console.log('Hotels Name: '+hotels[x].name);
        console.log('Hotels Lat: '+hotels[x].lat);
        console.log('Hotels Lng: '+hotels[x].lng);
        console.log('Hotels tel_num: '+hotels[x].tel_num);
        console.log('Hotels phone_num: '+hotels[x].phone_num);
        console.log('Hotels secondary_num: '+hotels[x].secondary_num);
        console.log('Hotels address: '+hotels[x].address);

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng (hotels[x].lat, hotels[x].lng),
        map: map
        });


        var contentString = '<div class="infobox-blue"><h1>'+hotels[x].name+'</h1><p>'+hotels[x].address+'</p><p>'+hotels[x].tel_num+'</p></div>';

        var infobox = new InfoBox({
        content: contentString,
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
        background: "url('images/blue-tipbox.gif') no-repeat",
        opacity: 0.75,
        width: "280px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "images/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
        });
        google.maps.event.addListener(marker, 'click', function() {
          alert();
          infobox.open(map, this);
        //map.panTo(loc);
        });
    }



     });
  });
  $("#mypanel").panel( "close" );
}

Answer 1

Set your content on google.maps.event.addListener event e.g.

google.maps.event.addListener(marker, 'click', function() {
   var contentString = '<div class="infobox-blue"><h1>'+hotels[x].name+'</h1><p>'+hotels[x].address+'</p><p>'+hotels[x].tel_num+'</p></div>';
   infobox.setContent(content);
   infobox.open(map, this);       
});

Demo

var hotels = [];
function HotelsQuery() {
    appDB.transaction(function(tx) {
      tx.executeSql("SELECT e.name, e.lat, e.lng, e.tel_num, e.phone_num, e.secondary_num, e.address FROM establishment e INNER JOIN places_cat_categorize p ON e.place_id = p.places_id WHERE p.cat_id = 40", [], function(tx, res) {
        console.log("Returned rows in HotelsQuery= " + res.rows.length);

        for (var i = 0; i < res.rows.length; i++) {
            hotels.push({
                "name": res.rows.item(i).name,
                "lat": res.rows.item(i).lat,
                "lng": res.rows.item(i).lng,
                "tel_num": res.rows.item(i).tel_num,
                "phone_num": res.rows.item(i).phone_num,
                "secondary_num": res.rows.item(i).secondary_num,
                "address": res.rows.item(i).address
            });
        }
      });
    });
  getLocationSuccess() ;    
}

function getLocationSuccess() {

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(hotels[0].lat, hotels[0].lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var bounds = new google.maps.LatLngBounds();

  var icon = {
    url: "img/map_pin.png", //url
    scaledSize: new google.maps.Size(50, 50), //scaled size
    origin: new google.maps.Point(0,0), //origin
    anchor: new google.maps.Point(0, 0) //anchor
  };

  google.maps.event.addListenerOnce(map, 'idle', function () {
     google.maps.event.trigger(map, 'resize');
     map.setCenter(new google.maps.LatLng(hotels[0].lat, hotels[0].lng));
  }); 

  for (i = 0; i < hotels.length; i++) { 

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(hotels[i].lat, hotels[i].lng),     
      map: map,
      icon: icon
    });   


   google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
       var contentString = '<div class="infobox-blue"><h1>'+hotels[i].name+'</h1><p>'+hotels[i].address+'</p><p>'+hotels[i].tel_num+'</p></div>';
       infowindow.setContent(contentString);
       infowindow.open(map, marker);
    }
  })(marker, i));
 }   

}