Setting Gmap3 marker values from a variable

Question

I've been trying to use the jquery plugin gmap3 to grab a json array from a textbox, reformat it and set it to a variable so that I can use it as the values for the "marker:" property. I got the values to display in a paragraph but I get nothing when setting it to the Marker:values.

I've created a jsFiddle below.

http://jsfiddle.net/ryanverdel/FUmpF/

Any help would be great.

    $(function(){

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

    $('#test-ok').click(function(){
      //var addr = $('#test-address').val();

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


      //if ( !addr || !addr.length ) return;

        $("#test").gmap3({
        getlatlng:{

         //address:addr,

            callback: function(results){

             var markers=[];

              $.each(jsonObj, function(i, item) {
    $('#display p').append('{'+'latLng: '+'['+jsonObj[i].latitude+', '+jsonObj[i].longitude+']'+', options:{icon: "http://www.mindboxdesigns.com/test-images/map_marker.png"}'+'}'+',');

    markers.push('{'+'latLng: '+'['+jsonObj[i].latitude+', '+jsonObj[i].longitude+']'+', options:{icon: "http://www.mindboxdesigns.com/test-images/map_marker.png"}'+'}'+',');
});


            if ( !results ) return;
            $(this).gmap3({
              marker:{
                //latLng:results[0].geometry.location,
                values:markers,
                map:{
                  center: true,

                },


              },
              autofit:{},
            });
          }
        }
      });
    });

    $('#test-address').keypress(function(e){
      if (e.keyCode == 13){
        $('#test-ok').click();
      }
    });
  });

Answer 1

I have changed the code a little bit to confirm to gmaps api.

http://jsfiddle.net/y32xY/2/

$("#test").gmap3({
  getlatlng:{
    //address:addr,
    callback: function(results){
      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:{
          //latLng:results[0].geometry.location,
          values: markers,
          options: {draggable: false}
        },
        autofit:{},
      });
    }
  }
});

P.S. I have used default Google Maps marker as the image mentioned in your code is producing 404 error.