I am looking to optimize the below code which uses user defined filters to add markers to a Google map.The basic process is to first remove all of the markers from the map, then loop over the available markers, and based on the users filters, add them if they match all of the filters.Right now I feel that the performance is not on par with my goals.  Using only one filter on 50 markers results in a process time of ~50ms.  Since there may be as many as 40 filters and they may increase the number of markers in the future to be as many as 150, I want to make sure that my filtering process is as performant as possible.My biggest problem with the code I have written is the nested loops, although I don't see a way around it.I have already optimized this by combining several for loops into the one here.  The only remaining excessive loop is the one that removes all of the features from the data layer of the map, but I can't figure out a way to combine that with the other loops.Please find the code below for your review.// Adds markers to the mapprivate addMarkers: Function = function( markers: any ){    // Save a reference to the array of markers    this.markers = markers;    // Get the map bounds    let bounds = this.map.getBounds();    // Create array to hold visible markers    let visibleMarkers: any[] = [];    // Remove all of the markers from the map    this.map.data.forEach( feature => {        this.map.data.remove(feature);    });    // If there is a map and it has a data layer and we have markers and filters    if (         typeof this.markers !== undefined         && typeof this.markers.features !== undefined        && this.markers.features.length         && typeof this.map !== undefined         && this.map.data         && typeof this.currentMarkerFilters === object         && this.currentMarkerFilters.length     ){        // Loop over each marker        for (var markerIndex=0, markersLength=this.markers.features.length; markerIndex<markersLength; markerIndex++){            // Loop over each filter            for (var filterIndex=0, filtersLength=this.currentMarkerFilters.length; filterIndex<filtersLength; filterIndex++){                // Get the filter                let filter = this.currentMarkerFilters[filterIndex];                // Get the marker                let marker = this.markers.features[markerIndex];                // If the map doesn't already have this marker                if ( typeof this.map.data.getFeatureById(marker.id) === undefined ){                    // If the filter has a key and value and we got a marker                    if ( typeof marker !== undefined && typeof filter.key === string && typeof filter.value === string && filter.key.length && filter.value.length ){                        // Match the filter against the marker                        if ( typeof marker.properties[filter.key] !== undefined && marker.properties[filter.key] === filter.value ) {                            // And add it if it passes the filter                            this.map.data.addGeoJson(marker);                            // Set the marker to the visible markers array since we added it to the map                            visibleMarkers.push(marker);                        }                    }                }            }        }    } else {        // Otherwise provide all markers to the map        this.map.data.addGeoJson(this.markers);    }}
Optimizing filtering of map markers using Google Maps JS API v3
javascript;typescript;google maps;angular 2+