Google Maps API Tutorial - Marker Categories© 2007, 2008, 2009 Mike Williams |
| Translate this page: |
Marker CategoriesIf 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 markersThe "hide(category)" and "show(category)" functions read through the array of markers and hide() or show() all the markers which match the specified category.Dynamic sidebarRather 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. Marker propertiesExtra 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.Checkbox settingsI 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.In order for this to work, I've set the "id" of the checkbox that manages the "theatre" category to "theatrebox", etc., so that the Javascript can easily obtain the name of the checkbox if it knows the category. Associative array of GIconsI'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. |