Show/Hide markers based on distance (using JQuery slider)

Im working on Gmap3 (Google maps with JQuery), and Im trying to Show/Hide markers according the distance of the user and other markers (according the slider value)

I've tried to calculate the distance every time with computeDistanceBetween(), but couldn't make it work.

here is a sample code (js) and jsfiddle link:

$(function(){

     var distance;

    $("#test").gmap3();

      $("#display p").empty();
      var coordinates = $("#geofenceCoords").val();
      var jsonObj = jQuery.parseJSON(coordinates); 

    //user position (Blue marker)
     var markersData = {
                    values: [
                            {
        latLng: [51.506695,-0.147950],
                                    options: {
                                        icon: "http://maps.google.com/mapfiles/kml/paddle/blu-circle.png",
                                    },
                                    data: 'aaabbb'
                                ,tag:"aaa", id:"<?php echo $id; ?>"
                                }
                            ,
                        ],
                    options:{
                        draggable: false
                    }
                };


        $("#test").gmap3({
        getlatlng:{
callback: function(results){
                        //add other markers
              var markers=[];
              $.each(jsonObj, function(i, item) {
              var marker = new Object();
                  marker.lat = jsonObj[i].latitude;
                  marker.lng = jsonObj[i].longitude;
                  marker.options = new Object();
                  marker.options.icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/marker.png");
                  markers.push(marker);
              });

$("#test").gmap3({
                marker:{
                    //add the markers
                  values: markers,
                  options: {draggable: false}
              },
              autofit:{},
            });
          }
        }              
      });

     //add the user position (blue marker)
$("#test").gmap3({
      action: 'addMarker',
      marker: markersData
},"autofit");

//slider to hide/show markers according the distance

   $("#slider").slider(
{
            range: "min",
                value: 500,
                min: 1,
                max: 1000,
            slide: function( event, ui ) {
               computedistance(ui.value);
                $( "#slider-value" ).html( ui.value );
                $( "#slider-distance" ).html( computedistanceAndHideMarkers(ui.value) );
            }
}
);

$( "#slider-value" ).html(  $('#slider').slider('value') );

function computedistanceAndHideMarkers(km){
   // var distance = google.maps.geometry.spherical.computeDistanceBetween(,km);
    //return distance;
} 

  });

Here is what I have so far: jsfiddle

Im very appreciate your help!

Thank you

Eran.

You didn't load the geometry-library in the fiddle.

the function which shows/hides the markers may look like this:

function computedistance(km) {

    var //the markers
        markers = $("#test").gmap3({
          get: {
            name: "marker",

            all: true
          }
        }),
        //location of the blue marker
        user = new google.maps.LatLng(markersData.values[0].latLng[0],
                                      markersData.values[0].latLng[1]),
        //the map
        map = $("#test").gmap3({
                get: {
                  name: 'map'
                }
              });


    //iterate over the markers
    $.each(markers, function (i, m) {
         m.setMap((google.maps.geometry.spherical
                    .computeDistanceBetween(user, m.getPosition()) <= km * 1000) 
                        ? map 
                        : null);
    })

}

Demo: http://jsfiddle.net/doktormolle/ahLmdLuf/