Google Maps API Tutorial - Marker Categories

© 2007, 2008, 2009 Mike Williams

Translate this page:


Marker Categories

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.

Dynamic sidebar

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.

Marker properties

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.

Checkbox settings

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.

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 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.

Back to Mike's Homepage
Up to the start of this tutorial