Marker Not being removed : leaflet

Question

I am working with the leaflet api.Where i have added custom control for marker.

And i have a button which tends to remove all markers.

Problem

Through wrapping, i have to remove all markers but function not working....Browser not giving any console error, so i am in dark, didn't fully understand the structure of api.

Script

            var markers = new L.FeatureGroup();
            map.on('click', function markerPlace(e) {
                //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
            marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
                markers.addLayer(marker);
                map.off('click', markerPlace);
            });
        }).addTo(map);

    //onClick this button we have to remove all marker
    <button id="removeMarker">Remove Markers</button>      
    $('#removeMarker').click(function (e) {map.removeLayer(markers) });

If someone have idea about that please help or any kind of reference will be appreciated.Thanks for your time

Answer 1

It's hard to interpret your code since it has a few errors in it.

You created a layer (or feature group) markers that contains all your markers. You add new markers to your markers layer by calling L.marker([51.5, -0.09]).addTo(markers), and then add this layer to your map by calling markers.addTo(map).

You can then remove this layer from the map by calling map.removeLayer(markers).

Here is a working demo: http://jsfiddle.net/5g7uy6Lk/

Answer 2

I suggest you could use Layer Groups & Layers Control for the markers by toggling the checkbox.

For example:

//Landmark Markers
var singaporezoo = L.marker([1.40495, 103.79049]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Singapore_Zoo_-_28600609.jpg" width="280px"/>' + '<br>' + 'Singapore Zoo' + '<p>' + '80 Mandai Lake Rd, 729826').addTo(map); 
var bukittimahnaturereserve = L.marker([1.34830, 103.77754]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Bukit_Timah_Nature_Reserve_-_28600674.jpg" width="280px"/>' + '<br>' + 'Bukit Timah Nature Reserve').addTo(map);  

//Garden Markers
var bukittimah_newCG_206 = L.marker([1.375289,103.772335], {icon: farmIcon2}).bindPopup('Garden: Block 226').addTo(map);
var bukittimah_newCG_237 = L.marker([1.3786099,103.77064], {icon: farmIcon2}).bindPopup('Garden: Block 237').addTo(map);

//Layer Group
var holland_bukittimah_landmarks = L.layerGroup([singaporezoo, bukittimahnaturereserve]);
var holland_bukittimah_newCG = L.layerGroup([bukittimah_newCG_206, bukittimah_newCG_237]);

//OverLays Selector
var overlayMaps = {
    "<img src='images/icons/marker-icon.png' width='20px'/> Landmarks": holland_bukittimah_landmarks,
    "<img src='images/icons/veggie2.png' width='20px'/> Gardens": holland_bukittimah_newCG
};

//TileLayer (BaseMap)
    var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')

//Add Layer to Map
    map.addLayer(layer);

//Add Overlays Control to Map
L.control.layers(null, overlayMaps).addTo(map);