Click here to Skip to main content
13,829,602 members
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 29 Nov 2013
Licenced CPOL

How to Display and Hide Marker Groups in Google Maps using the gomap jQuery Plugin

, 2 Dec 2013
Rate this:
Please Sign up or sign in to vote.
Using the gomap jQuery plugin to programmatically add markers, then show and hide them on demand

The Sign

As I wrote earlier, Google maps are great, and the gomap plugin makes them even more a joy to work with.

The Windup

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.

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.

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:

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'

An example CreateMarker() call then looks like this:

    address: '37.83°N 119.50°W',
    title: 'Yosemite',
    group: 'NatlParksGroup',
    icon: constants.natlParksIcon,
    html: getYosemite()

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:

$.goMap.showHideMarkerByGroup('NatlParksGroup', true)

The code above, as you probably suspected, makes all markers of the National Parks Group (those markers who had their group property set to 'NatlParksGroup' in the CreateMarker() call, that is) visible. Had "false" been passed as the second argument to showHideMarkerByGroup(), the corresponding markers would have been immediately hidden. Once the markers load onto the map, hiding them is virtually instantaneous, as is showing them again.

By using groups this way, you can display many different types of data simultaneously. For example, here is what my "USA Map-O-Rama" web page (all the code is attached to this article and can be downloaded) looks like after all six of the groups have been activated/made visible:

You may have noticed that gomap's CreateMarker() function also has an HTML property. You can use this to add any HTML you want to display when the marker is clicked. For example, if the user clicks the "Mark Twain" marker at Hannibal, Missouri, he will see this:

Similar is true for all markers: for sports teams (National Football League or Major League Baseball only are included in this map, but you may want to extend it to include your favorite sport[s] (I love basketball, too, but have personally boycotted the NBA due to the unfair refereeing practiced in that sport), books on those teams are displayed; for State Capitals, books about the State are shown; for musicians, some of their most popular or significant recordings are shown, etc. - clicking on any of these takes you to the Amazon page for these books/recordings).

The Pitch

You could, of course, use this file as a starting point, or at least a "light bulb" to create your own map of other regions, with either similar or very different categories to display. For example, a similar map of Canada, replacing baseball teams with hockey teams, or of Great Britain, showing the home bases of soccer teams and rock bands) could also be very interesting.

Another enhancement would be to replace the "human readable" addresses, such as "Fort Bragg, California" with the longitude and latitude (such as was shown for Yosemite Park above). Doubtless the markers are more quickly placed on the map when the intermediate step of converting an address to a geolocation (geocoding) has already been done for the Google gerbils.

In some cases in the included jQuery, I have done this, that is, when it was necessary, such as for National Parks, which don't really have an "address", so using the lat/long was necessary. Also, for some sports teams, a city alone was enough (such as "Green Bay, Wisconsin") but for others, where multiple sports teams exist in the same city, sometimes even in the same category (such as the Chicago Cubs and Chicago White Sox), I used the address of the team's stadium.

The upshot is, replacing addresses, whether somewhat general (such as "Green Bay, Wisconsin") or quite specific (such as "1060 West Addison Street, Chicago, Illinois 60613") with latitude/longitude pairs would speed up the load time of the markers.

Note: To run the standlone (non-hosted) site discussed herein, simply download the article's zip file, expand/decompress/unzip it, and 2-click the MapORamaHome.html file.

Additionally or alternatively, you can view this as a live web site here. The live site will always be the most current, as I add authors and musicians from time to time (recently Caroline Miller and Erskine Caldwell, among others, for example). 

Secret Bonus Section (Don't Read This, or Your Peepers Will Explode)

Note: If you run this web page in your browser and "zoom out," you will see more markers, specifically of the newest State Capitals (in Hawaii and Alaska) and of National Parks, including the Dry Tortugas (the Wet Tortugas are presumably underwater and thus invisible) and even American Samoa:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

B. Clay Shannon
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006:

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190114.1 | Last Updated 2 Dec 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid