Removing Marker From Map (Google Map)

Question

I have an ajax request which creates a marker(s) once the user clicks on the map. Once the user has created the marker at a specific click location i then register a click even on the marker.

If the user clicks on a marker i am displaying a jquery dialog with the buttons which allow the user to remove the marker from the map or set the marker status a active. I am having problems removing the marker once the user clicks on the marker and selects 'remove marker' from the jquery dialog.

var roadBlockMarker =[{"roadBlockId":null,"purpose":null,"userName":null,"status":null,"latAdd":null,"longAdd":null}];

Ajax Request creates the marker

$.ajax({
   type: 'POST',
   url: 'createRoadBlock.htm',
   async: 'false',
   cache: false,
   data: {
      purpose: f_purpose,
      userName: f_userName,
      status: f_status,
      latAdd: f_latAdd,
      longAdd: f_lngAdd
   },
   dataType: 'json'

}).success(function (recordId) {

   console.log('Road Block created with id ' + recordId);
   //create marker for roadblock
   //create marker for currently clicked location
   var roadblock_img = new google.maps.MarkerImage('/crimeTrack/resources/icons/roadblock_wait.png', null, // size
   null, // origin
   new google.maps.Point(8, 8), // anchor (move to center of marker)
   new google.maps.Size(17, 17)); // scaled size (required for Retina display icon)
   var myLatLng = new google.maps.LatLng(f_latAdd, f_lngAdd);
   roadBlockMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: roadblock_img,
      title: 'Road Block Waiting Progress ' + recordId,
      flat: true,
      optimized: false,
      visible: true
   });


   roadBlockMarker.setMap(map);

   $("#roadblock-dialog").dialog("close");

   //attach a click event so police officers can activate road block or remove it
   google.maps.event.addListener(roadBlockMarker, "click", function () {

      $("#roadblockmarker-dialog").dialog("open");

   });

});

Jquery Dialog called when marker is clicked and displays option to remove or activate marker

$("#roadblockmarker-dialog").dialog({
    autoOpen: false,
    height: 100,
    width: 380,
    resizable: false,
    modal: true,
    buttons: {
       "Cancel": function () {
          $(this).dialog("close");
       },
       "Remove Marker": function () {

         //how can i remove the marker clicked by the user only?

       },
       "Activate Road Block": function () {
          alert('Activating RoadBlock');
       }
    }
 });

Answer 1

When you open the dialog in the click -handler of the marker set an dialog-option that contains a reference to the marker:

$("#roadblockmarker-dialog")
 //set the option
 .dialog( "option", { marker: this } )
  //open the dialog
  .dialog("open");

Then you may access this option in the function Remove Marker

$(this)
 //close the dialog
 .dialog("close")
  //access the option(marker)
  .dialog( "option" ).marker
   //and remove it
   .setMap(null);