Databases
StackOverflow2013
Postsdbo
POWhat sort of loop structure to compare checkbox matrix with Google Maps markers?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat sort of loop structure to compare checkbox matrix with Google Maps markers?
    text
    copied!<p>I'm trying to build a map of trails around my town.</p> <p>I'm using an XML file to hold all the trail data. For each marker, I have categories like "surface," "difficulty," "uses," etc.</p> <p>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.</p> <p>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.</p> <p>What I want is for the map to display only markers that match ALL the values that are checked (rather than ANY).</p> <p><strong>I took a hack at this. You can see the result here</strong>: <a href="http://www.joshrenaud.com/pd/trails_withcheckboxes4.html" rel="nofollow">http://www.joshrenaud.com/pd/trails_withcheckboxes4.html</a></p> <p>(I should point out there is a bug where despite only one category being checked on load, all markers display anyway.)</p> <p>It doesn't work. </p> <p>I am pretty new to Javascript, so I am sure I have done something totally wrong, but I can't figure out what.</p> <p>My specific questions:</p> <ol> <li><p>Does anyone see anything glaringly obvious that is keeping my second example from working?</p></li> <li><p>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?</p></li> </ol> <p>Here is some of the relevant code, although you can just view source on the examples above to see the whole thing:</p> <pre><code>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&lt;surfaceArray.length; i++) { if (document.getElementById('surface'+surfaceArray[i]).checked == true) { surfaceChecked[j] = surfaceArray[i]; j++; } } j=0; for (i=0; i&lt;difficultyArray.length; i++) { if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) { difficultyChecked[j] = difficultyArray[i]; j++; } } j=0; for (i=0; i&lt;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&lt;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&lt;surfaceChecked.length; l++) { // this loops runs through all checked Surface categories for (var m=0; m&lt;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&lt;difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories for (m=0; m&lt;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&lt;useChecked.length; l++) { // this loops runs through all checked Use categories for (m=0; m&lt;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&lt;surfaceMatches.length; m++) { if (surfaceMatches[m] == true) { surfaceOK = true; } else if (surfaceMatches[m] == false) {surfaceOK = false; break; } } for (m=0; m&lt;difficultyMatches.length; m++) { if (difficultyMatches[m] == true) { difficultyOK = true; } else if (difficultyMatches[m] == false) {difficultyOK = false; break; } } for (m=0; m&lt;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) &amp;&amp; (difficultyOK == true) &amp;&amp; (useOK == true)) { gmarkers[i].show(); } } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload