This is the Google Calendar Map (GCM) homepage, part of the mapFilter project on github. GCM is a way to view calendar events on a google map, see About for more or go straight to the working GCM prototype. This page will change but always contain the latest and greatest on how to use GCM prototype.


Paraphrased from my first GCM blog:

Basically it takes a google calendar and plots all the events on a map.  Well, at least all events that have a valid map address.  The mashup works with any google calendar, as long as its public. You provide the URL of a google calendar XML Feed to GCM, then its javascript code eats it up and spits out markers on the map and lists all events on the right side.  The list is really a table, with sortable columns (sort by date, event name, address).

The map acts like a filter – you only see events that occur on the map canvas.  For example, if the map is zoomed in to show downtown Chicago, you might only see events in grant park.  But if you zoom way out you will see events in north chicago or suburbs, too.  This is great when there is a calendar with tons of events going on all over the place.

For more details on this project, check out my GCM presentation from January 2010.  Also make sure to read the Key Features below.


  • calendar – a google calendar for now.  Only events in the calendar with valid addresses will appear on map.
  • event – contains name, location, date, and description.  More than one event can be at same location or same time. Can be repeating
  • map canvas – the area of the map you can see on the browser. If an event location is not on the map canvas, it will not be shown on the events list. To zoom out or change map canvas to show all events, remove the map filter by clicking “[x] Filtered by map”
  • location – ‘where’ the event is.  This should be an address, otherwise GCM can’t put it on a map.  Examples of locations that are not addresses include  “Mom’s house” or “Top of Sears Tower”
  • marker – an icon at a location on the map canvas.  When clicked, reveals details on events at that address (may be more than one event at same location)
  • drawer – on the right side, this contains most everything not on the map – the calendar name, date sliders, GCM logo, status,  events list and filters.  The drawer can be opened/closed (shown or hidden) by clicking on the +/- in the top right.
  • events list – in the drawer, list (in table format) of matching events that are on map.  The events listed are filtered and sortable by name, date, location. When filtered, it may be a subset of all the events.
  • filters – appears above events list.  Currently there are just 2 filters – map and date.  Existing filters are always listed, and can be removed by clicking them.  When all filters are removed, all events are displayed in events list (map will change if necessary to show all events, too).


  1. User: Going to a neighborhood, want to see what events occur in that neighborhood
    • use map to jump to that neighborhood, and the map change triggers events list and markers to update
  2. User: Going to attend a specific event, want to see what else is nearby
    • use events list to highlight event, which triggers map to center on event
  3. Promoter: My band, book tour, historic buildings seminar, archeological dig, etc .. has several events in several places on different dates. I want to show them all.

Key Features

  1. Map as a Filter
    Move or zoom the map to the area you care about.  The markers and the events list update instantly and automatically, hiding events that are not on the map canvas
  2. Date slider as a Filter
    Show only events that occur between a specific start date and end date.  You can click “Change dates” to pick a large window, say 6 months.  Once all events for those 6 months is loaded and decoded (a few seconds), you can used the date sliders to filter events to a certain week or weekend or whatever.  Instantly.  It’s fun, try it out!
  3. Event Address Debugger
    If you’re not sure how many of your events have valid addresses as locations, this feature makes it easy to find out. All event locations are decoded, and if any are not valid addresses, a “Warning [3]” will appear above the events list.  Clicking on it displays a table of the problematic events.  Just click “Event Details” to load that specific google calendar event.  If you are logged into google and have edit permissions, you can update it immediately, save, and reload GCM.
  4. Map Link
    Share a specific events calendar with exact map location and zoom level – just like the “link” button on google maps
  5. Simple
    First time users – Grab any Google calendar’s ID, drop it in – it just works.  Or grab the “Map Link” and email or IM it to a friend.
  6. Instant
    When you drag date sliders to a specific day, events list updates instantly.  Likewise, moving the map will instantly update events list to only show those events on the map canvas.
  7. Sortable Events
    Events in events list are sortable by name, date, and location
  8. Jump to an address, city, or zip – just type it in the box
  9. Multiple events can exist on one location
  10. Want all map?  you can now make the map cover the entire browser window by closing the GCM Drawer by clicking the +/- in the top right.

Calendar Setup

First, make your calendar public (if it ain’t your calendar, ask owner to do it).

  1. In the Google Calendar interface, locate “My Calendars” or “Other Calendars” lists on the left.
  2. Hover over desired calendar, and click the arrow the appears. A menu will appear.
  3. Click “Share this calendar”
  4. Check “Make this calendar public”
  5. Make sure “Share only my free/busy information” is unchecked.
  6. Click “Save”

Second, find your Calendar’s ID

  1. In the Google Calendar interface, locate “My Calendars” or “Other Calendars” lists on the left.
  2. Hover over desired calendar, and click the arrow the appears. A menu will appear.
  3. Click “Calendar settings”
  4. Look at the “Calendar Address” section of the screen, near XML, ICAL, HTML icons.
  5. Copy string after “Calendar ID:” – it may be your email, or may look like vf3u7s6odj0r74q4lrnb730phk@group.calendar.google.com
  6. NOTE: the calendar ID can also be extracted from the XML Feed. For example, xxxx@group.calendar.google.com is the id for this XML Feed:

Lastly, Paste the Google Calendar ID in the box above. Optionally add more Calendar IDs, separated by spaces. Click “Add Calendar” .. you’re off!

URL Options

This section explains how some of the (un)documented options for http://chadnorwood.com/gcm work.  Options are standard key=value params in the URL.


Potential Examples:

  • Tour schedule for bands
  • Garage sales on craigslist
  • Homeowners: Open Houses
  • Chicago Summer Festivals

Actual Working Examples


more here

Influences and Related

  • UI
    • Google.  Duh.
    • kayak.com filters
    • padmapper.com
  • Code
    • jquery
    • jquery-ui

As of September 2010, this is very much a prototype.  That means lots of trying out things to see what works. There are many bits and pieces from other projects, more details coming soon.

Browser Compatibility

Tested to work with the following browsers:

  • Safari
  • Chrome
  • Firefox
  • IE9
  • IE8
  • IE7 (maps can be buggy)

Wish List

  • Text box as a Filter
    • type chars in a box and only events that contain those chars will show
  • Code cleanup
    • Lots here


This info is now in the mapfilter changelog on github

This file can also be viewed as a GCP project on github pages

  1. No comments yet.
  1. September 12th, 2010 at 21:54 | #1
  2. September 12th, 2010 at 21:55 | #2
  3. March 30th, 2011 at 20:57 | #3
  4. April 10th, 2011 at 10:43 | #4
  5. September 29th, 2011 at 13:19 | #5