2

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 :-)

Improve this question
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>
Improve this answer
  • Thanks for the detailed response foamcow. I'm a jquery novice; in fact that's why I'm using the Google Maps for EE module. Do you know how I would use the jQuery function you provided with the way the EE module ouputs the maps and markers? See, the example I provided uses the google maps api v2, whereas, the module uses v3. – vibe9 Apr 3 '13 at 16:05
  • I'm not familiar with the module or the exact changes between V2 and V3 of the Maps API. However, basically, each of the markers being added to the map have a "type" parameter. Is there some way to do that with the module? The jQuery function is called by someone clicking one of the checkboxes which fires it's onclick event and calls the "togglegroup" function passing the name of one of the marker types to it. Add the function into your page template. And attach the events to whatever you want to trigger the function. – foamcow Apr 4 '13 at 9:21
  • Would this example from the Module's documentation not help you? objectivehtml.com/google-maps/examples/jquery – foamcow Apr 4 '13 at 9:26
  • Yes, I've spent quite a bit of time looking at that example in the docs, however, it does not show how to hide/show a group of categorized markers. It only shows how to hide/show individual markers. – vibe9 Apr 5 '13 at 6:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.