Filter google maps array with jquery

Question

I want to implement a filter with jQuery slider but I don't really know how to do it. The application shows in a google map some markers with information of theaters of Spain. The array of theaters is loaded with php from a database.

var auditorios = [['Baluarte','Pamplona',42.81362217617467,-1.6468226909637451,'/index.php?id=1','1500','400','1.2','02_baluarte.jpg','1'],['Teatre Nacional de Catalunya','Barcelona',41.42171161401106,2.179288100000008,'/index.php?id=2','2000','500','1.8','teatre_nacional_de_catalunya.jpg','2'], ['Auditorio Nacional de Música','Madrid',40.44604831353722,-3.678132900000037,'/index.php?id=3','2000','600','1.9','auditorio_nacional_musica_madrid.jpg','3'],];

And with a "for" I take all parameters so I can call bootstrap modal

function setMarkers(map, locations) {

    for (var i = 0; i < locations.length; i++) {
    var auditorio = locations[i];
    var posicionauditorio = new google.maps.LatLng(auditorio[2], auditorio[3]);
    var marker = new google.maps.Marker({
      position: posicionauditorio,
      animation: google.maps.Animation.DROP,
      map: map,
      title:auditorio[0],
      ciudad:auditorio[1],
      href:auditorio[4],
      capacidad:auditorio[5],//localidades del auditorio
      volumen:auditorio[6],//volumen del auditorio
      trmid:auditorio[7],//TRmid del auditorio
      foto:auditorio[8],
      idauditorio:auditorio[9]
      //icon:pin
    });

    google.maps.event.addListener(marker, "click", function () {

        $('#myModalLabel').html(this.title);//Seleecionar el título del auditorio actual
        $('#localizacion').html('<i class="icon-map-marker"></i> '+this.ciudad);
        $('.capacidad').html(this.capacidad + ' localidades');//Seleccionar el contenido HTML del auditorio actual
        $('.volumen').html(this.volumen + ' m3');
        $('.trmid').html(this.trmid + ' seg.');
        $('#mas-info-auditorio').attr('href',this.href);
        $('#fotoauditorio').attr('src','archivos/auditorios/'+this.idauditorio+'/'+this.foto);
        $('#myModal').modal('toggle');
    });
    }
    //Fin setMarkers
    }

I want to filter "capacidad:auditorio[5]", "volumen:auditorio[6]" and "trmid:auditorio[7]" with some sliders, but I dont know how to do it.

Here is the link of this application: map application

Answer 1

Store the markers in a global accessible array, the you be able to iterate over the markers in the slide-callback and set their visibility by comparing the slider-values against the value of the marker-attributes.

Example for the volumen-slider(assuming a global accessible array named markers which contains all markers):

$.each(markers,function(i,o){
   o.setVisible(ui.values[0]<=o.volumen && ui.values[1]>=o.volumen);
});