Question

I have code which generates markers on a Google map based on certain criteria. What I’m attempting to do is generate a list next to the map which would contain the address associated with each marker that appears on the list as well as a checkbox next to each address. At the bottom of this list would be a “refine” button which would return only the results which had their checkbox selected.

My question are:

1. How would I store the dynamically generated checkboxes and their respective address fields so that I could update and modify the selection with the refine button?

2. How would I (or should I) actually set each checkbox to run a function on onClick which would remove the marker from the map?

Answer 1

Create checkboxes on the fly inside a given div

var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);

To run through these checkboxes adding event handlers:

// modify this if not just a bunch of checkboxes in a div:
var checkboxes = holder.getElementsByTagName('input'); 
for(var i=0; i < checkboxes.length; ++i) {
    var thisCheckBoxId = checkboxes[i].id;
    // create a listener
    var callback = function(event) {
        myGeneralHandler(i, event);
    }
    if(checkboxes[i].addEventListener) {
      checkboxes[i].addEventListener('click', callback, false);
    } else { //IE
      checkboxes[i].attachEvent('click', callback);
    }
}

Then set up myGeneralHandler to handle clicks from any checkboxes.