What sort of loop structure to compare checkbox matrix with Google Maps markers?
- by Kirkman14
I'm trying to build a map of trails around my town.
I'm using an XML file to hold all the trail data. For each marker, I have categories like "surface," "difficulty," "uses," etc.
I have seen many examples of Google Maps that use checkboxes to show markers by category. However these examples are usually very simple: maybe three different checkboxes.
What's different on my end is that I have multiple categories, and within each category there are several possible values. So, a particular trail might have "use" values of "hiking," "biking," "jogging," and "equestrian" because all are allowed.
I put together one version, which you can see here: http://www.joshrenaud.com/pd/trails_withcheckboxes3.html
In this version, any trail that has any value checked by the user will be displayed on the map. This version works.
(although I should point out there is a bug where despite only one category being checked on load, all markers display anyway. After your first click on any checkbox, the map will work properly)
However I now realize it's not quite what I want. I want to change it so that it will display only markers that match ALL the values that are checked (rather than ANY, which is what the example above does).
I took a hack at this. You can see the result online, but I can't type a link to it because I am new user. Change the "3" in the URL above to a "4" to see it. My questions are about this SECOND url. (trails_withcheckboxes4.html)
It doesn't work.
I am pretty new to Javascript, so I am sure I have done something totally wrong, but I can't figure out what.
My specific questions:
Does anyone see anything glaringly obvious that is keeping my second example from working?
If not, could someone just suggest what sort of loop structure I would need to build to compare the several arrays of checkboxes with the several arrays of values on any given marker?
Here is some of the relevant code, although you can just view source on the examples above to see the whole thing:
function createMarker(point,surface,difficulty,use,html) {
var marker = new GMarker(point,GIcon);
marker.mysurface = surface;
marker.mydifficulty = difficulty;
marker.myuse = use;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers.push(marker);
return marker;
}
function show() {
hide();
var surfaceChecked = [];
var difficultyChecked = [];
var useChecked = [];
var j=0;
// okay, let's run through the checkbox elements and make arrays to serve as holders of any values the user has checked.
for (i=0; i<surfaceArray.length; i++) {
if (document.getElementById('surface'+surfaceArray[i]).checked == true) {
surfaceChecked[j] = surfaceArray[i];
j++;
}
}
j=0;
for (i=0; i<difficultyArray.length; i++) {
if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) {
difficultyChecked[j] = difficultyArray[i];
j++;
}
}
j=0;
for (i=0; i<useArray.length; i++) {
if (document.getElementById('use'+useArray[i]).checked == true) {
useChecked[j] = useArray[i];
j++;
}
}
//now that we have our 'xxxChecked' holders, it's time to go through all the markers and see which to show.
for (var k=0; k<gmarkers.length; k++) { // this loop runs thru all markers
var surfaceMatches = [];
var difficultyMatches = [];
var useMatches = [];
var surfaceOK = false;
var difficultyOK = false;
var useOK = false;
for (var l=0; l<surfaceChecked.length; l++) { // this loops runs through all checked Surface categories
for (var m=0; m<gmarkers[k].mysurface.length; m++) { // this loops through all surfaces on the marker
if (gmarkers[k].mysurface[m].childNodes[0].nodeValue == surfaceChecked[l]) {
surfaceMatches[l] = true;
}
}
}
for (l=0; l<difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories
for (m=0; m<gmarkers[k].mydifficulty.length; m++) { // this loops through all difficulties on the marker
if (gmarkers[k].mydifficulty[m].childNodes[0].nodeValue == difficultyChecked[l]) {
difficultyMatches[l] = true;
}
}
}
for (l=0; l<useChecked.length; l++) { // this loops runs through all checked Use categories
for (m=0; m<gmarkers[k].myuse.length; m++) { // this loops through all uses on the marker
if (gmarkers[k].myuse[m].childNodes[0].nodeValue == useChecked[l]) {
useMatches[l] = true;
}
}
}
// now it's time to loop thru the Match arrays and make sure they are all completely true.
for (m=0; m<surfaceMatches.length; m++) {
if (surfaceMatches[m] == true) { surfaceOK = true; }
else if (surfaceMatches[m] == false) {surfaceOK = false; break; }
}
for (m=0; m<difficultyMatches.length; m++) {
if (difficultyMatches[m] == true) { difficultyOK = true; }
else if (difficultyMatches[m] == false) {difficultyOK = false; break; }
}
for (m=0; m<useMatches.length; m++) {
if (useMatches[m] == true) { useOK = true; }
else if (useMatches[m] == false) {useOK = false; break; }
}
// And finally, if each of the three OK's is true, then let's show the marker.
if ((surfaceOK == true) && (difficultyOK == true) && (useOK == true)) {
gmarkers[i].show();
}
}
}
