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. William B
    March 8th, 2016 at 08:35 | #1

    I am not able to use iframe either, so @Scott Wells is correct,

  2. William B
    March 8th, 2016 at 08:38 | #2

    @William B
    I think iframe does not work because my site uses SSL, and the map url does not offer a SSL

  3. March 10th, 2016 at 11:44 | #3

    This is nice, but the fonction reload date don’t seem to work.



  4. March 13th, 2016 at 12:35 | #4

    Hi Chad,

    I seem to be unable to make gcm work for our calendar (qliehq62ganfu4hj7su4b3jsmc@group.calendar.google.com).
    Wondering if this is still maintained?

    Would love to use this for our band tour! 🙂

    Thanks so much,

  5. Richard
    June 16th, 2016 at 03:05 | #5

    Hi Chad, I had high hopes for your map but sadly, for me at least, I can’t see anything on your prototype; your examples or ones I’ve added.

    I only seem to see @gmail/@googlemail addresses appear on Google Calendar settings, and I’ve tried a few without success, e.g. veganlondon@googlemail.com and veganlondon@gmail.com

    Is there anything I’m doing wrong; I’m using Firefox browser, which looks like it’s working okay (I’ll try others when I get a minute)? Thanks for any advice.

    I, like pretty much everyone else it seems, just wish that Google hadn’t scrapped their public calendar search, so I could find more to try –

    “We’ve decided to discontinue public calendar search and the public calendar gallery. These were specialized U.S. English-only features that weren’t used as extensively as we would have liked, and proved difficult to maintain over time. We’re looking at ways to make it easier to search and browse public calendars, but for now we’ve removed the gallery and public calendar search function.”

  6. Brad Burke
    October 4th, 2016 at 15:54 | #6

    Hey Chad! Hope all is well. There seems to be an issue with the date slider. If I do a 7 day view and try to slide the start date to the right it doesn’t seem to be filtering out the inappropriate range. If I’m not mistaken its about 4-5 days off. I was wondering if you could help with that. Thanks!

  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