Chad Things

This is the project homepage for Google Calendar Map (GCM), a way to view calendar events on a google map. View the source code on github or go straight to the working GCM prototype.  This page will change but always contain the latest and greatest on this project.

• About
• Definitions
• Uses
• Key Features
• Calendar Setup
• URL Options
• Examples
• Screenshots
• Influences and Related
• Browser Compatibility
• Wish List
• Changelog

About

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.

Definitions

• 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 results 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)
• results list - on right pane, list of events that are on map.  The results are filtered and sortable by name, date, location. When filtered, it be a subset of all the eventsThis may be all events in date range or a subset.
• filters - appears above results 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 results list (map will change if necessary to show all events, too).

Uses

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 results list and markers to update
2. User: Going to attend a specific event, want to see what else is nearby
   • use results 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 results 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 results 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 XML link, 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, results list updates instantly.  Likewise, moving the map will instantly update results list to only show those events on the map canvas.
7. Sortable Results
   Events in Results 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

Calendar Setup

First, make your calendar public (if it ain’t your calendar, ask owner for XML feed URL).

1. In the Google Calendar interface, locate “My Calendar” box on the left.
2. Click the arrow next to the calendar you need.
3. A menu will appear. 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 XML feed URL

1. In the Google Calendar interface, locate the “My Calendar” box on the left
2. Click the arrow next to the calendar you need.
3. A menu will appear. Click “Calendar settings”
4. In the “Calendar Address” section of the screen, click the XML badge.
5. Your feed’s URL will appear. Copy It

Third, add your URL to the “Add Calendar” box on the main page

• Before (no calendar)
  http://chadnorwood.com/gcm/
• After (example with calendar)
  http://chadnorwood.com/gcm/?u=http://www.google.com/calendar/feeds/webdog6@gmail.com/public/basic

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.

• Timezone
• as of 2011-9-21, gcm defaults to browser’s timezone.  Adding tz=cal to URL will use calendar’s timezone.  Ex: http://chadnorwood.com/gcm/?tz=cal&u=https://www.google.com/calendar/feeds/dnr6osjdrtn4fqpf70ep8ck1rc%40group.calendar.google.com/public/basic
• Startdate, Enddate
  • sd=2011-2-12
  • ed=2011-2-24

Examples

Potential Examples:

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

Actual Working Examples

• Chad’s Chicago: Summer Festivals and More
• A New York Track Club
• 2011 Trail Races

Screenshots

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 5
• Chrome on Mac
• Firefox 3.6
• IE8
• IE7 (sorta, must scroll to right)

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

Changelog

2009-6-12 - Initial release of prototype
2009-8-4 - change to 200 max events (from 25)
2009-11-19 - updated to work with new google maps api .
2010-01 - made a test version using date sliders.
2010-6-20 - fixed slider handles so they do not overlap.
2010-9-12 - Second version of GCM prototype.  Initial one moved to gcm2009.
2011-1-9 - Added basic support for recurring events.
2011-3-29 - Finished some under-the-hood coding and released source code as mapfilter project on github. Read more on the GCM on github blog post.
2011-9-21 - Added timezone support. See details in URL Options above.