Javascript select Google markers for all possibilities of checkbox conditions

Question

I am placing markers on a Google map. I have a number of checkboxes (19 currently) in a form that I am trying to create a dynamic "and" condition to display or not display markers. The code works great for the individual pieces when a single checkbox is selected. I would like to have the code take into account if multiple checkboxes are selected and only display those markers that meet all conditions not just add the ones that meet the next condition.

Givens:

The checkbox ids are "q"+#
Each Google Marker has values of true or false for each q#(checkbox) the code is below: createMarker(point,html,q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12, q13, q14, q15, q16, q17, q18, q19)
There are many Marker Points

Need:

If checkbox 1 and 2 are checked only display those markers that have q1 = true "and" q2 = true in the createMarker variables. However, also allow for a single checkbox to be checked and the correct Markers displayed I need this condition for all possibilities of checkboxes being selected (1 to 19).

How can I make this work?

Current Code for single condition:

//loop through the checkbox questions
for (var h=1; h<20; h++) {
        //check to see if the checkbox is checked
        if (document.getElementById('q'+h).checked == true) {               
            for (var i=0; i<gmarkers.length; i++) { 
                //check to see if the Marker has that variable set to true for the question it is loop through                  
                if (h == 1 && gmarkers[i].q1 == 1) {                            
                                    \\ show marker                      
                                     gmarkers[i].show();                    
                }
                if (h == 2 && gmarkers[i].q2 == 1) {                            
                   // turned off for testing    
                                       //gmarkers[i].show();                    
                }
                if (h == 3 && gmarkers[i].q3 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 4 && gmarkers[i].q4 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 5 && gmarkers[i].q5 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 6 && gmarkers[i].q6 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 7 && gmarkers[i].q7 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 8 && gmarkers[i].q8 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 9 && gmarkers[i].q9 == 1) {                            
                    //gmarkers[i].show();                   
                }
                if (h == 10 && gmarkers[i].q10 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 11 && gmarkers[i].q11 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 12 && gmarkers[i].q12 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 13 && gmarkers[i].q13 == 1) {                          
                    gmarkers[i].show();

                }
                if (h == 14 && gmarkers[i].q14 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 15 && gmarkers[i].q15 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 16 && gmarkers[i].q16 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 17 && gmarkers[i].q17 == 1) {                          
                    //gmarkers[i].show();                   
                }
                if (h == 18 && gmarkers[i].q18 == 1) {                          
                    //gmarkers[i].show();                   
                }                   
                if (h == 19 && gmarkers[i].q19 == 1) {                          
                    //gmarkers[i].show();           
                }


            }

        }

Dr.Molle Dr.Molle · Accepted Answer · 2013-10-23T17:00:00

An approach where you did not have to iterate over each q-property of the marker:

Use bitwise operations.

Lets assume you have a marker with the properties q1, q3 and q5 set to true .

Instead of storing each property of the marker, use a decimal and set the bytes 1,3 and 5.

This would result in the binary value 10101 (the decimal is 21, store it as the marker-property)

To compare this decimal with the checked checkboxes use also a decimal and set the bytes where the checkboxes are checked.

Assuming the checkboxes for q1 and q5 are checked, the binary value would be 10001(decimal 17)

All you have to do now is to check if the result of a bitwise AND of the markers property and the checkboxes-property is equal to the checkboxes-property

((21 & 17)>>>0===17)//returns true

This approach would work for up to 32 properties.

Demo: http://jsfiddle.net/doktormolle/hsPVS/

Javascript select Google markers for all possibilities of checkbox conditions

1 Answers