GCM

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.

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 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).

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 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:
    https://www.google.com/calendar/feeds/xxxx@group.calendar.google.com/public/basic

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 https://chadnorwood.com/gcm work.  Options are standard key=value params in the URL.

Examples

Potential Examples:

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

Actual Working Examples

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
  • 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

Changelog

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.

    Thanks

    Alex

  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,
    Chelsea

  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!

  7. October 7th, 2016 at 06:47 | #7

    Hi Chad:

    I’m testing GCM for a Lettings Agency in London. I can see GCM helping us visualize the proximity of our pre-scheduled viewing appointments. It’s real handy to help us see (on Google Maps) the location of all our appointments. We can then assign just one agent to handle viewings in close proximity with each other, optimize our appointment times, and reduce downtime between viewings. I can see this saving us a lot of time and money!

    Many thanks for your work on this project!


    Eric

  8. November 10th, 2016 at 09:46 | #8

    Hey Chad, its been a while since I last posted here, but I just wanted to extend my thanks again for updating the API last year. Everything is still working wonderfully! Hope things are going well for you!

    Zach E.
    TearJerkers Administrator
    http://tearjerkers.net/new_forum/Calendar.html

  9. December 6th, 2016 at 10:12 | #9

    Chad, this tool is amazing! Any way I can export the map to a kml file now that I have it in GSM? It would be great to change the pin colours etc, which google map allows.

    Thank you! It’s working great for me.

  10. kb
    April 17th, 2017 at 06:53 | #10

    Is there any problem with GCM lately? The map shows “Fetching calendar” and stays at 0 events.

  11. Andy Lytle
    February 9th, 2018 at 15:22 | #11

    Chad,

    We are looking for an app that will display the location of a private calendars events. Can you help?

    Andy

  12. May 9th, 2018 at 13:02 | #12

    Hi Chad, hope all is well! Was wondering if there’s a way to direct links inside of calendar events to open in a new window, rather than opening in the map frame.

    http://tearjerkers.net/new_forum/Calendar.html

    Thanks much!!

  13. May 19th, 2018 at 08:10 | #13

    I absolutely love it (except when it doesn’t work perfectly). Last night, I was demonstrating it to someone using my Android phone and the map refused to switch over from the Chicago area to south Florida where my events are located. Any tips would be greatly appreciated.

  14. June 13th, 2018 at 10:36 | #14

    Hello Shade,

    my link has not worked for several months and I can not find why … can you help me?

    Many thanks !

    Christian

  15. August 12th, 2018 at 15:58 | #15

    CHAD
    GREAT STUFF except for the part about viewing calendar in public!
    I just tried GCM to help with scheduling HVAC maintenance for my company. All my appointments were placed on one google calendar week and over 200 locations populated on the map. I would then choose several from the same neighborhood and reschedule them for another date in September or October and assign them to a service technician (this took them off the public calendar). After scheduling a few days I would refresh the map and there would be fewer appointments to schedule. Within 2 days all the appointments were scheduled to reduce the amount of driving time between “Free Maintenance Visits”. My next step is to have my office manager send appointment cards to my customers with their appointment dates. This worked great! I just don’t like to place my calendar in the “the public can see everything” mode! Is there a way to use your code to be able to use it within my privacy settings?

  16. Corey
    August 27th, 2018 at 09:25 | #16

    Hi Chad — I have been using your calendar mapping tool very happily for years, but I am not getting a load error (“This page can’t load Google Maps correctly.
    “and asking if I own the site which in turn links to this page — https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors

    Any thoughts on a fix?

    Thanks!
    -C

  17. Corey
    August 29th, 2018 at 08:27 | #17

    @Corey
    Issue resolved and all seems to be working normally now. Thanks!

  18. August 29th, 2018 at 14:39 | #18

    @Corey
    Yes thanks for calling that to my attention. I had to update API keys and now we’re all good.

  19. Mina
    September 9th, 2018 at 12:16 | #19

    Hi Chad,

    I was looking at your GCM project and it would serve well as the basis for something we have in mind to develop. Small budget is available. Would you be interested?
    Would love to talk to you about this. Please email me back. Thanks…..

  20. Brad
    October 10th, 2018 at 11:26 | #20

    Hey Chad, I seem to be having problems with my normal links this morning. Haven’t changed anything and the standard GCM page loads but no errors.

  21. Brad
    October 23rd, 2018 at 21:27 | #21

    Strange, seems to be working again.

  22. Jay
    January 1st, 2019 at 15:17 | #22

    Hi, have seen success with mapping an external calendar subscription that I had subscribed into my Google Calendar (G Suite). However, if I try to share my own calendar create from within G Suite calendar with GCM, I always get “Refreshing” (0 events). It can’t pick it the calendar link even though the same calendar seems properly public (and I can view the calendar via its website/public URL). This problem happens with my main calendar as well as any secondary calendars in the account Any troubleshooting or known issues?

  23. Brad
    January 9th, 2019 at 12:59 | #23

    Hello again Chad! GCM seems to be having trouble today. My calendar ID is the same but just the standard GCM page is loading. Any help?

  24. Dawid
    January 28th, 2019 at 03:13 | #24

    Hallo! First I want to say, that it’s awesome project.

    Could you add either
    A) direct coordintates support. Everytime I try to set up link like below, it brings an error.

    https://www.google.com/maps/place/53%C2%B020'58.4%22N+18%C2%B025'14.3%22E/@53.349563,18.4184603,17z/data=!3m1!4b1!4m6!3m5!1s0x0:0x0!7e2!8m2!3d53.3495634!4d18.4206486
    B)Support for non-english names recognition. I’ve tried first solution, because it doesn’t recognize special characters in my language.

  25. Brad
    February 13th, 2019 at 11:13 | #25

    Still getting a fetching calendar error on Safari. Any ideas?

  26. March 18th, 2019 at 17:36 | #26

    Bonjour Chad! You have to update API keys i think…

    Many thanks for your work !

  27. Corey
    March 20th, 2019 at 12:02 | #27

    @Christian Am experiencing a load error as well. Thanks!

  28. March 20th, 2019 at 14:33 | #28

    UPDATE – Sorry to say this is dead. I know longer work on this project, and Google has discontinued the free use of Google Maps API, so this won’t work without paying for it. The code is still on github, so it’s possible to create your own Google Cloud Platform account, create API key for “Maps Javascript API” service, and use that key instead of mine, on your own hosted site.

  29. March 21st, 2019 at 08:15 | #29

    Is there any way you can give us a walkthrough on how to make the code work on our website? This was my go to service for my job, and now it’s not working 🙁

  30. March 21st, 2019 at 09:06 | #30

    I see others have switched from Google Maps to Leaflet, a free map .. I will see if I can make that work.

  31. Corey
    March 21st, 2019 at 09:06 | #31

    @chad Thank you Chad — You created a fantastic solution, and I am sorry to see it go. With that being said, I’d be interested in speaking to anyone who might be working on a replacement to this service.

  32. March 21st, 2019 at 17:07 | #32

    thanks Chad, i hope you can make that work !!!

  33. Brad
    March 21st, 2019 at 22:39 | #33

    I too would like a walkthrough of how to make this my own. I appreciate your help over the years Chad and wish you the best in what you do!

  34. March 25th, 2019 at 12:15 | #34

    Just noticed our gathering event map has quit working, and now I see its not just us. A walkthrough to host our own map with our own API would be great! Or to try the Leaflet map service would be nice as well. Either way would be greatly appreciated. Thanks Chad!

  35. March 25th, 2019 at 19:15 | #35

    How much is the charge for Google Maps key? I am willing to donate.

  36. March 27th, 2019 at 14:15 | #36

    Chad, I’m trying to migrate GCM to my TearJerkers.net domain. I’m still having issues with the map displaying. Please follow with me to make sure I’ve done this right: I downloaded the mapfilter package from GitHub, and copied the GCM directory to my server. I then overwrote your API key in cnMapFilter.js, with my own Google Maps API Key that I just got. For that key, I set the http restrictions to http://*.tearjerkers.net Finally I updated the iframe url address on our Gathering Calendar page (beginning of url change from chadnorwood.com/gcm/ to tearjerkers.net/new_forum/gcm/). The map looks like it wants to load, so I think I have all the mapfilter files in the right spot, but still get the same error about not loading Google Maps correctly. Are you able to tell if it’s something I’m doing wrong?

    http://www.tearjerkers.net/new_forum/Calendar.html

    Thanks!

  37. March 27th, 2019 at 14:43 | #37

    Sorry all, haven’t had time to resolve this.

    @zach – when I load the page i see RefererNotAllowedMapError in console https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error

    So you just need to make an update in google to fix.

  38. March 27th, 2019 at 15:19 | #38

    @chad – excellent, thank you! Does the API key in index.html need to be the same as in cnMapFilter.js? I didn’t see this in any directions, but came across it as I was trying to troubleshoot. Anyway, google map is now showing (woohoo!) but none of our events are being mapped. It says showing 5 valid calendars, but no events are loaded. Is there a calendar api that I need to activate or load somehow?

  39. March 28th, 2019 at 09:36 | #39

    @chad – Have an update this morning! I had to also enable Google Calendar API on the same key that I was using for the maps. You probably already knew this, but maybe this will help others trying to do the same. So the TearJerkers are back online! Thanks for the guidance!

  40. Corey
    April 1st, 2019 at 15:32 | #40

    @Zach Hi Zach — Are you open to the idea of sharing exactly how to replicate the TearJerkers solution on my domain? Please reach out to me at abrams.corey@gmail.com. Thank you.

  41. May 14th, 2019 at 08:06 | #41

    @Zach
    Zach, can you please provide a brief walkthrough?

  42. June 14th, 2019 at 12:12 | #42

    I got the map to work, but no events are showing 🙁 Although it shows 2 valid calendars. Can you please, help.

  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