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.



  1. User: Going to a neighborhood, want to see what events occur in that neighborhood
  2. User: Going to attend a specific event, want to see what else is nearby
  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 theeventslist. 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,eventslist updates instantly. Likewise, moving the map will instantly updateeventslist to only show those events on the map canvas.
  7. Sortable Events
    Events ineventslist 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
  6. NOTE: the calendar ID can also be extracted from the XML Feed. For example, 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 work. Options are standard key=value params in the URL.


Potential Examples: Actual Working Examples


more here

Influences and Related

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:

Wish List


This info is now in the mapfilter changelog on github This file can also be viewed as a GCP project on github pages