Remove Google Maps Markers by label

Question

Im currently working on a cross platform app that has a google map that has a whole bunch of icons on it. I use an Ajax query to get a kendo ui mobile datasource that has a list of lat/lng values and a category of the object.
From there when the user selects turn on that category, those markers appear on the map. This currently works however removing them is the issue.

When I go to remove them, I do not know how to delete all markers with a specific label. Is there a global array of markers that I can iterate through to find the appropriate markers to remove?
If there is I can simply set these particular markers map to null to remove them.
My code for adding markers is below:

    var dataItem;
    var facData = new kendo.data.DataSource({
        ........
    });
    facData.fetch(function() {
        if (e.checked == 1) {
            for (var i = 0;i < facData.view().length;i++) {
                dataItem = facData.view()[i];
                dataItemLatLng = new google.maps.LatLng(dataItem.lat, dataItem.lon);
                createMarker(dataItemLatLng, "Toilets", toiletIcon);

            }                
        }
        else {
            Code for removing all markers with label "Toilets" 
        }
    })
}

There's no global array of markers that you can iterate through unless you create one yourself. — Beetroot-Beetroot, Jul 01 '13 at 03:00
So a simple solution is creating an array of markers and iterating through that... Right. Ill post back if I find a solution myself. — Mike Betterton, Jul 01 '13 at 03:06

Beetroot-Beetroot · Answer 1 · 2013-07-01T03:26:37.313

In some outer scope :

var markers = [];

And your function that creates/removes markers :

function foo() {
    var facData = new kendo.data.DataSource({
        ........
    });
    facData.fetch(function() {
        if (e.checked == 1) {
            for (var i = 0; i < facData.view().length; i++) {
                var dataItem = facData.view()[i];
                var dataItemLatLng = new google.maps.LatLng(dataItem.lat, dataItem.lon);
                var marker = createMarker(dataItemLatLng, "Toilets", toiletIcon);
                markers.push(marker);
            }
        }
        else {
            while(markers.length) {
                markers.pop().setMap(null);
            }
        }
    });
}

You need to ensure that createMarker() returns the created marker.

As written, the markers array is emptied as the markers are removed from the map. This seems sensible, otherwise, next time round the array would still contain references to the old markers plus references to all the new ones - much of the time, this would mean duplicate markers created from the same data as last time ... and so on, and so on.

Thanks, As you posted this, I managed to do it myself, Ill post my version below, too, its very similar to yours. — Mike Betterton, Jul 01 '13 at 03:34

score 0 · Accepted Answer · answered Jul 01 '13 at 03:35

0

I created a global array that each marker, when added is pushed into. Then the remove code is simply:

for(var i=0; i< markerArray.length;i++){
                if(markerArray[i].getTitle()=="Toilets"){
                    markerArray[i].setMap(null);
                }
            }

answered Jul 01 '13 at 03:35

Mike Betterton

72
1
9

OK. For multiple categories, it's probably better to maintain one array per category. Also note the point in my answer about clearing out the array(s) as the markers are removed. Otherwise the array will grow and grow and your application will have a client-side memory leak. – Beetroot-Beetroot Jul 01 '13 at 03:38

Remove Google Maps Markers by label

2 Answers2