Ouch! My head hurts. Been working on this issue for hours and my brain is folding on itself.
Basically, Isotope is hiding or showing html elements on my page, and I need to hide or show the corresponding Google Maps markers on the embedded map in a very efficient manner (lots of Google Maps markers).
So... I have a MASTERARRAY[] full of objects. Each object in the array has a unique id.
i.e. MASTERARRAY[i].id
This MASTERARRY[] also has a Google Maps marker object associated.
i.e. MASTERARRAY[i].marker
When Isotope filters the HTML elements on my page on my page, I push an object with the unique id to one of the following arrays:
ISOTOPEFILTER.resultsRemovedFromPage
ISOTOPEFILTER.resultsOnPageAfterFiltering
The code below will successfully REMOVE markers off my map by comparing the MASTERARRAY to ISOTOPEFILTER.resultsRemovedFromPage. However, I have no idea how to efficiently have this function also show the Google Map markers who's IDs exist in the ISOTOPEFILTER.resultsOnPageAfterFiltering array.
function updateMap() {
var hiddenMarkerCount = 0;
for (i in ISOTOPEFILTER.resultsRemovedFromPage) {
for (var j=0; j<MASTERARRAY.length; j++) {
if (ISOTOPEFILTER.resultsRemovedFromPage[i].id == MASTERARRAY[j].id){
hiddenMarkerCount++;
MASTERARRAY[j].marker.setMap(null);
break;
}
}
}
console.log("We have hidden"+hiddenMarkerCount+" markers");
}