leaflet maps - remove marker layer group and add another marker layer group
<p>My objective here is to remove all the markers added to leaflet using layer group for a paginated listing page.When navigated to other page i am able to remove layer group of previous page, but on adding new layer group of markers(markers of next page) i am getting this error in browser and markers are not added to the map</p>

<p>error is - Uncaught TypeError: layer.onAdd is not a function;</p>

<p>code is </p>

<pre><code>var leaflet_factory = {
    //initializing map container
    initialize: function() {
        var map = L.map('mapresults');
        var googleLayer = new L.Google('ROADMAP');
        map.addLayer(googleLayer);
    },

    //set view of mao
    setview: function(lat, long, zoom) {

        map.setView([lat, long], zoom);

    },

    //add list of markers to maps

    addMarkersList: function(marker_array) {
        var markerArray = [];
        $.each(marker_array, function(key, data) {
            var marker_pointer = L.marker([data.lat, data.long]).bindPopup('&lt;a href="/' + $(this).attr('data-slug') + '"&gt;&lt;strong&gt;' + $(this).attr('data-vendor').capitalize() + '&lt;/strong&gt;&lt;br&gt;&lt;/a&gt;' + $(this).attr('data-location').capitalize());
            markerArray.push(marker_pointer);
        });
        window.page_makers_layer = L.layerGroup(markerArray);
        window.page_makers_layer.addTo(map);

    },

    //remove the current marker layer group

    removeMarkerLayer: function() {

        map.removeLayer(window.page_makers_layer);

    }
}
</code></pre>

<p>The problem with the above code is when calling addMarkersList for first time after initializing the map container it works.
But when i call addMarkerList with new list of markers(lat long pair) after calling removeMarkerLayer to remove existing marker layer it gives me following error which i am trying to debug.</p>

<pre><code>Uncaught TypeError: layer.onAdd is not a function
</code></pre>

<p>Please point where i am doing wrong.</p>