.gmap('search') in .each method, getting every object in callback function

Question

I develop PhoneGap application with using jquery-mobile and gmap-plugin. I have some code and some trouble with it.

 str = '';
    db.transaction(function(t){     
      t.executeSql('SELECT name,address FROM table', [], function(t, res) {
        for(var i=0; i<res.rows.length; i++) {
          str += '<option selected="" value="'+res.rows.item(i).address+'">'+      
              res.rows.item(i).name + '</option>'; 
        }
      });
    },null,function(){
      $('#selectMenu').html(str);
      $('#selectMenu').selectmenu("refresh");
      $('#selectMenu').on('change', function () {
        setMarks();
      });
    });

function setMarks (){
  $('#map_canvas').gmap('clear', 'markers');
  var el;

  $("#selectMenu option:selected").each(function () {
    el = $(this);
    $('#map_canvas').gmap('search', { 'address': el.val() }, function(results, status) {    
        if ( status === 'OK' ) {
                $('#map_canvas').gmap('addMarker', { 'position': results[0].geometry.location, 'bounds': true,
                    'html': "<h3>"+el.text()+"</h3><p>"+el.val()+"</p>"},
                            function(map, marker) {
                    $(marker).click(function() {                                  
                                   $('#map_canvas').gmap('openInfoWindow',{'content': $(this).attr('html')}, this); 
                               return false;
                    });
              });       
        }
    });  
  });
}

In callback function of method search object el is last in my collection of selected elements, but I would like to see every object. Maybe someone faced with problem like this one. Thanks!

Answer 1

I decided make differently. Not sure that it is the best way, but it works for me. I use global array of markers. In callback function of marker click event I get index of current marker. By this index I get option from selectmenu and past into infoWindow information I need.

var arMarkers = new Array();

function arMarkersIndexOf(o) { 
    for (var i = 0; i < arMarkers.length; i++) {
        if (arMarkers[i].getPosition() == o.getPosition()) {
            return i;
        }
    }
    return -1;
}

var str = '';
db.transaction(function(t){     
   t.executeSql('SELECT name,address FROM table', [], function(t, res) {
            for(var i=0; i<res.rows.length; i++) {
              str += '<option selected="" value="' +
                    res.rows.item(i).address + '" data-index="' + i.toString() + '" data-seq="' + res.rows.item(i).MainOrg + '">' + 
                    res.rows.item(i).name + '</option>';                    
                $('#map_canvas').gmap('search', { 'address': res.rows.item(i).address }, 
                       function(results, status) {
                          if ( status === 'OK' ) {
                            $('#map_canvas').gmap('addMarker', { 'position': results[0].geometry.location, 'bounds': true}, 
                              function(map, marker) {
                                 arMarkers.push(marker);
                                 $(marker).click(function() {
                                     var i = arMarkersIndexOf(this);
                                     $('#map_canvas').gmap('openInfoWindow', {'content': '<h3>' + $('#selectMenu option[data-index="' + i.toString() + '"]').text() + '</h3>' + 
                                                    '<h4>' + $('#selectMenu option[data-index="' + i.toString() + '"]').data('seq') + '</h4>' +
                                                    '<p>' + $('#selectMenu option[data-index="' + i.toString() + '"]').val() + '</p>'}, this); 
                                     return false;
                                 });
                             });  
                         }
                       });  
            }
        });
    },null,function(){
        $('#selectMenu').html(str);
        $('#selectMenu').selectmenu("refresh");         
    });