If you have a map that shows several categories of markers, you may want to hide and show all the markers of one category at once, and remove the corresponding sidebar entries.
Here’s an example that does that.
The code makes use fo several of the techniques that have been described previously, which I’m not going to describe again.
The distinctive features of this code are:
Hiding and showing markers
The “hide(category)” and “show(category)” functions read through the array of markers and hide() or show() all the markers which match the specified category.
Rather than adding the sidebar entries as each marker is created, the “makeSidebar()” function is executed after all the markers already exist, by reading the gmarkers array. It omits entries for which gmarkers[i].isHidden().
The “makeSidebar()” function is called whenever the marker display changes.
Extra Properties are added to the marker Objects, to store the category and sidebar name information. This allows the “makeSidebar()”, “hide(category)” and “show(category)” functions to obtain all the information that they need from the marker Objects, rather than having to use some external list.
I can’t seen to get <input type=”checkbox” checked > to do exactly what I want, so I’ve added a line to the “hide()” and “show()” functions to ensure that the checkbox is checked and cleared.
Associative array of GIcons
I’ve used an associative array to hold the GIcons, (as explained in the Associative arrays and Custom Icons tutorial). I’ve used the same names for the icons and categories.