Google Maps custom dropdown menu with checkboxes

Question

I have a little problem with checkboxes integrated in Google Maps controls.

In Google Maps API v3 docs, it says that you can use "custom controls" (https://developers.google.com/maps/documentation/javascript/examples/control-custom) but nothing about dropdown menu. I was surfing the net and found this example of Briana Sullivan:

http://vislab-ccom.unh.edu/~briana/examples/gdropdown/index.html

It shows a dropdown menu with checkboxes integrated in Google Maps controls.

I was able to do it in my web, and I coded that with something more added. In that example, when you check a checkbox, a basic alert is shown. In my case, when I check a checkbox, Google Maps markers are hidden, and when clicking again the same checkbox, Google Maps markers are visibles again.

I use a dropdown menu with one checkbox per markers category. This way, I can show/hide category per category every markers in my maps.

My problem is that I don't know how to check the checkboxes from Javascript nor init those checkboxes as checked by default.

Can you help me with checking those checkboxes without clicking them with the mouse?

I don't use a jsfiddle example here because you have everything in the Briana's example I linked above.

Thanks!!

EDIT: Adding code...

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    }
}
var check0 = new checkBox(checkOptions0);
var checkOptions1 = {
    gmap: map,
    title: "bbb",
    id: "2",
    label: "bbb",
    action: function(){
        showhide("2");
    }
}
var check1 = new checkBox(checkOptions1);
var ddDivOptions = {
    items: [check0, check1],
    id: "myddOptsDiv"
}
var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);               
var dropDownOptions = {
    gmap: map,
    name: 'Boxes',
    id: 'ddControl',
    title: 'Boxes',
    position: google.maps.ControlPosition.TOP_RIGHT,
    dropDown: dropDownDiv
}
var dropDown1 = new dropDownControl(dropDownOptions);

function showhide(category) {
    for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].id == category) {
            estado = gmarkers[i].getVisible();
            gmarkers[i].setVisible(!estado);
        }
    }
}

"gmarkers" is an array that contains every marker printed on map. "gmarkers[i].id" is the category of each marker, and when clicking on checkbox, every marker with id defined on it equal than checkbox will be hidden / shown on map.

Answer 1

Finally found a solution. I think I was not so clever the other day :D

The script used by Briana is: http://vislab-ccom.unh.edu/~briana/examples/gdropdown/gdropdown.js

Modifying it and adding a new line after

bDiv.id = options.id;

This way:

bDiv.id = options.id;
bDiv.style.display = options.display == "" ? "none" : options.display;

Now, you can define if you want to init the checkbox checked or not with the new option "display"; using two values: "none" or "block".

Then, setting now the checkbox options shown in my own question, using the new option "display":

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    },
    display: 'block'
}

Thanks anyway @geocodezip !! :)