How to hide/show groups of markers by category with Google Maps for ExpressionEngine module

Question

I'm looking to do something like what is done right here.

So here's the breakdown of what I need to do:

• Have markers grouped by category
• Have a checkbox (or anchor) for each category
• When anchor/checkbox is clicked the markers associated with that category get shown (or hidden) toggled on/off

As the title suggests, I'm looking for advice on how to do this with Google Maps for ExpressionEngine.

I've got all my data stored as EE entries and I am fully aware of how to display a map with all of these points using the module, I just need some advice on how to implement the jquery to accomplish toggling markers by category :-)

Answer 1

That page you show assigns a group to each marker it outputs (it's doing this from an XML file which I haven't looked at).

The following jQuery function is then bound to the checkboxes' onclick event;

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 

Here's an example of the checkbox markup...

<input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" />

This is called with a group name and loops through the markers in that group showing any markers that are hidden.

So the main trick is assigning a group to your markers as you output them and that's basically it!

EDIT. Here's the XML for the marker data. You could do it this way by

<markers>
    <marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/>
    <marker name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>
    <marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>
    <marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/>
    <marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/>
    <marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/>
    <marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/>
    <marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/>
    <marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/>
</markers>