Showing and Hiding Categories on Google Maps

by clayshannon

HTML

<h2>The Signal</h2>

<p>As <a href="http://www.codeproject.com/Articles/684735/Allow-Users-to-Zoom-In-On-Any-A">I wrote earlier</a>, Google maps are great, and the <a href="http://www.pittss.lv/jquery/gomap/">gomap plugin</a> makes them even more a joy to work with.</p>

<h2>The Windup</h2>

<p>Showing a bunch of homogeneous markers is great, and sometimes is all you need, but what if you want to show and hide groups, or categories, of markers? To make the groups/categories visually distinct, you can use different colored markers, one color to designate each group. You can also then easily hide or show all markers for a particular group in "one fell swoop" using the gomap functions.</p>

<p>The gomap plugin's CreateMarker() function has an icon property you can set, so that you can use whichever image you want for that marker.</p>

<p>First, you can (after saving the images you want to your project, of course) declare the "fake constants" for the various groups and path to their corresponding marker image, such as:</p>

<pre>
    var constants = {
        'nflIcon': 'Content/Images/lightorange.png',
        'mlbIcon': 'Content/Images/green.png',
        'stateCapsIcon': 'Content/Images/indianred.png',
        'natlParksIcon': 'Content/Images/skyblue.png',
        'authorsIcon': 'Content/Images/purple.png',
        'musiciansIcon': 'Content/Images/teal.png'
    };
</pre>

<p>An example CreateMarker() call then looks like this:</p>

<pre>
    $.goMap.createMarker({
        address: '37.83°N 119.50°W',
        title: 'Yosemite',
        group: 'NatlParksGroup',
        icon: constants.natlParksIcon,
        html: getYosemite()
    });
</pre>

<p>You will, of course, need one of these for each marker you want to create. As you probably noticed, the CreateMarker() function also has a "group" property that you can set, and gomap provides a ShowHideMarkerByGroup() method, which then allows you to show or hide a group programmatically like so:</p>

<pre>
    ...