Remove gmappanel marker -EXTJS 4

Question

function addDoctorLocation(options) 
{
    var gm = Ext.getCmp('mygooglemap');
    var mpoint = new google.maps.LatLng(options.lat,options.lng);
    var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
    infoBubble = new InfoBubble({maxWidth: 300});
}

tree.on('checkchange', function(node){
    var data = node.data;

    if (data.checked == true){
        var options = {
            lat:3.951941,
            lng:102.052002,
            marker: {title:"Hello World!"},
            listeners: {
                click: function(e){

                }
            }     
        }     
        addDoctorLocation(options);           
    }

    Ext.MessageBox.show({
        title: 'Changed checkbox status',
        msg: 'MainID: ' + data.MainID + ' <br /> Checkbox status: ' + data.checked,
        icon: Ext.MessageBox.INFO
    });
})

QUESTION

This code successfully adds the marker when a checkbox is checked, however,how do I remove the marker when the checkbox is unchecked?
Do I need to assign an id to the marker? When uncheck, should I then delete the mark by the id? additional : a map have multi markers, not only 1 marker only

Answer 1

Create a structure of markers as a global variable. When you add markers, add them into the structure too, keyed on something unique based on the checkbox. So you can use this later to identify which marker to hide. If data.checked != true then use marker.setMap(null); to get rid of it.

Something like:

var markers = {};

function addDoctorLocation(options) 
{
    var gm = Ext.getCmp('mygooglemap');
    var mpoint = new google.maps.LatLng(options.lat,options.lng);
    var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
    infoBubble = new InfoBubble({maxWidth: 300});

    // assign it into the structure
    markers[options.MainID] = marker;
}

tree.on('checkchange', function(node){
    var data = node.data;

    if (data.checked == true){
        var options = {
            lat:3.951941,
            lng:102.052002,
            marker: {title:"Hello World!"},
            listeners: {
                click: function(e){

                }
            },
            MainID: data.MainID
        };     
        addDoctorLocation(options);           
    } else {
        markers[data.MainID].setMap(null);
    }

    Ext.MessageBox.show({
        title: 'Changed checkbox status',
        msg: 'MainID: ' + data.MainID + ' <br /> Checkbox status: ' + data.checked,
        icon: Ext.MessageBox.INFO
    });
});