Google Calendar Map

June 12th, 2009

UPDATE 2010-9-12 Updated Prototype and New GCM Homepage – Leave new comments there!

As previously mentioned in my google maps mashup post, I love maps.  Due to the clean APIs and very fast response, many people have built  cool mashups using the maps API.  I even got paid to do one for landmarkfinder.  But recently I’ve been using google calendar alot, and with all the summer action here in Chicago I wanted an easier way to know where and when to go places.

Enter my new Google Calendar Maps Mashup. 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. Basically you provide the URL of a google calendar XML Feed, my javascript code eats it up and spits out markers on the map and lists them on the right side.  The list is really a table, with sortable columns (sort by day, 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.  If you only have a couple events or all the events are the same location, its not too exciting.    Check it out.

I got to know jquery and javascript a little better during this project  – I’m even planning on releasing my code as plugin.  Expect that in a week or two after i’ve cleaned it up and solidified the features and UI.

UPDATE 2010-9-12 Updated Prototype and New GCM Homepage – Leave new comments there!

  1. June 13th, 2009 at 11:17 | #1

    AWESOME! I’ve been pining for something like this or a long time! I’m having a hard time getting it to work with the Toronto event calendars on these pages.

    http://yousayyeah.com/calendar

    http://www.blogto.com/events

    Any ideas?

  2. chad
    June 13th, 2009 at 13:48 | #2

    Ryan – Thanks !! I looked at those 2 sites for a feed – google calendar link preferred, but i couldn’t find it. The first one gave an error msg from the rss feed link – http://yousayyeah.com/calendar/rss – but the second one has potential. Its an xml feed that embeds location address inside the description. I’ll see if i can extract it easily.

  3. June 24th, 2009 at 19:15 | #3

    Chad,

    I think your work is fantastic! I am trying several options to get a local non-profit calendar of events streamed into a map. And after some tweaking of lat, lng, and zoom this solution is by far the best I have come across. So many others are not real time. Keep up the great work!!

    I was wondering if I can link to your page from our website and put our calendar of events through your app to display a map? We have very little traffic, but I thought it would be cool to show the few people we do have visit what the possibilities are out there. Right now we are using a pipe to a KML source that needs to be updated and re-imported to google each time we make a change. (uggghhhh…)

  4. chad
    June 24th, 2009 at 19:19 | #4

    Of course you can link to it. Let me know if you run into any problems or have any suggestions.

  5. Andrew Heffernan
    June 26th, 2009 at 09:52 | #5

    I have been testing different browsers and OS. So far I have used:
    Mac 10.5.7 /w Safari 4.0 – Works Great
    Vista /w Internet Explorer – Works Great
    Mac 10.5.7 / Firefox 3.011 – Blue Screen and appears to not communicate /w Google

    Screen Shot @ http://tinyurl.com/nb2z4c

  6. Andrew Heffernan
    June 26th, 2009 at 12:09 | #6

    I had a buddy try it in Chrome and Firefox on XP. Chrome worked great, Firefox… not yet.

  7. August 3rd, 2009 at 13:51 | #7

    This is excellent work. A question: why does Google Calendar Map only load 25 events?

  8. chad
    August 4th, 2009 at 07:24 | #8

    All – yeah, i see blue screen for some versions .. I’ve been busy but hope to look at soon.

    Jeff – I’m not sure what you mean by loading only 25 events. There is no hard code 25 limit. Google can return a certain error code which makes my javascript wait longer before asking google again for coords given an address.

  9. August 4th, 2009 at 20:56 | #9

    @chad
    It always shows “Showing 25 of 25 Events” no matter how many days I choose. And I have probably a few hundred events on my calendar. Give it a try:

    http://tinyurl.com/lc4buv

  10. chad
    August 4th, 2009 at 21:59 | #10

    @Jeff

    You’re right. Google Calendar feeds return only 25 max by default. I changed it to support up to 200 for now – that’s pushing it. When I get some free time I hope to make this a little more robust, perhaps add a URL parameter “max-results”

    cheers,
    chad

  11. August 5th, 2009 at 09:43 | #11

    @chad

    Ok, now a blue screen shows and the map never displays. Perhaps 200 is too much?

    Thanks for all the responses… I think your Google Calendar Map rocks.

    jeff

  12. August 12th, 2009 at 10:24 | #12

    Working pretty well now. Thanks.

  13. October 16th, 2009 at 19:03 | #13

    Chad,

    Thank you so much for working on this. I was searching the internet and I knew someone had to have done this. Your solution is exactly what I was looking for. Any status updates on a released version or plug-in? How can I implement this on my site? I would be willing to make a donation to support your work. Let me know and keep up the great work.

    Paul

  14. chad
    October 20th, 2009 at 07:04 | #14

    @Paul

    I know this works well with safari but not so well with firefox. Instead of spending time tracking down browser issues every few months, i’m redoing this using Google Web Toolkit (which should take care of this).

    I’m also willing to discuss it more with you – shoot me an email chad AT chadnorwood.com

  15. November 17th, 2009 at 00:59 | #15

    What is the status of this mashup? It is exactly what I’m looking for, but it doesn’t seem to work on IE or Chrome or FF.
    Thanks,
    Jeff

  16. November 19th, 2009 at 15:53 | #16

    Jeff,

    Yes, it was broken – apparently google maps api changed about a month ago.

    In any case, it works now – i tested on mac: firefox 3.5, safari, opera, and on windows firefox, chrome, ie8 and ie7 (altho ie7 you must scroll right).

    It is in need of some CSS love .. i’ve mostly focused on javascript side.

  17. March 26th, 2010 at 06:06 | #17

    Really useful tool. Is there anyway to save the URL with showing all events for a year, with the calendar zoomed out? The only URL I can save is showing only the first event.

    Thanks in advance
    Ben

  18. March 26th, 2010 at 06:13 | #18

    @Ben Slade
    Er, never mind. I found the “map link” link.

    Next question, is there a way to save the dynamically created calendar to one of my existing calendars? (so the map doesn’t have to be dynamically created from the calendar everytime it’s displayed)

  19. Jeff J.
    April 6th, 2010 at 20:58 | #19

    I was also wondering on the status of the plugin. I am attempting to try using Google Maps and Calendar to schedule service calls at the company I work with. Is there a way I can get this on my own site or running in Google App Engine on our domain? It would also be nice to make sure it was mobile friendly for the Android Phones.

    Right now we can map an address from the mobile calendar, but it would be really nice if we could see all events so we could schedule a tech for nearby jobs at a glance.

    I could make a donation also if that’s what you need.

  20. April 7th, 2010 at 14:16 | #20

    Ben – what do you mean by “dynamically created calendar” ??

    Jeff J – I’d love to learn more about what you want to do. send me and email chad at chadnorwood.com

    All – I’m revisiting this again, Expect an update next week or so.

  21. Ariah Fine
    May 6th, 2010 at 23:33 | #21

    I’m really interested in GCM. Any chance you could make an option to grab just the map with the events embedded, but not the big white right sidebar?

  22. May 13th, 2010 at 14:01 | #22

    I am wondering if there is a way to choose the dates that I want to map ie can I map events that occurred last year for historical data purposes? Thanks!

  23. August 8th, 2010 at 04:32 | #23

    Hi Chad, I just discovered this. We schedule techs and service calls as well. And we do everything with google calendar and google maps. This would be so useful if it integrated right into our google apps domain. Public calendars are not an option for us. Whatever came of Jeff’s question about the plugin?

  24. August 12th, 2010 at 09:15 | #24

    Really helpful application you’ve got here. It’s exactly what I was looking for. Hoping to use for a shared calendar of ministry events in our city. Thanks for all the work you’ve put into this.

  25. August 24th, 2010 at 07:44 | #25

    Thanks everyone for your comments. I do have an updated version (releasing soon) where you can control dates a bit better among other things. My plan is to put it out there so people can use it, then go back and redesign it a bit better (it grew very organically, so not the best code to understand and work with).

    Sorry for delay on updates – I did put this on hold for a bit while i got married. Stay Tuned!

  26. Kennith Sellars
    August 28th, 2010 at 08:15 | #26

    This looks amazing. I seem to be having a problem though. My calendar has plenty of events on it (in sept and oct.) but the code keeps saying no events found. here is the xml link http://www.google.com/calendar/feeds/7jfpl7f7nsldh29s0np6lon3r8%40group.calendar.google.com/public/basic

    Am I doing something wrong?

  27. Kennith Sellars
    August 28th, 2010 at 08:28 | #27

    Never Mind I found the view whole year button sorry. 🙁

  28. Kennith Sellars
    August 30th, 2010 at 06:44 | #28

    it seems that if you don’t have an event within the first 3 days from today that it doesn’t find any of them. Also, It seems to choose at random about 5-7 dates it doesn’t want to display or that have “errors”… but they aren’t always the same.??? Thank you so much for your help this app is amazing!

  29. September 2nd, 2010 at 12:46 | #29

    Thanks for the application. I have repurposed it for http://www.positiveaction.org, you have to go to the home page and click on the slide that says “Convention Scedule”. We travel all over the country each year to various conventions. I used your script along with a google calendar to place all our reps on a google map.

    Thanks for the resource.

  30. September 2nd, 2010 at 12:52 | #30

    One other thing I did that may be helpful to others. I integrated it with extinfowindow which basically allows me to style the bubble window within the map. Also I moved the 2 functions that allowed styleing the sidebar of text and the actual windo into the HTML document. Made it easier to modify.

    Since you are looking at redesigning it it would be nice if it could take advantage of localstorage for the geocoded data. Also it would be nice if the jquery dependece were removed. I removed most of it for my purpose but still need the base jquery file for functionality.

    I think it would also be cool if I could feed it multiple calendars, for example we would like to plot home school conventions alongside Christian school conventions, with blue pins for one and red pins dfor the other.

    Thanks again,

    Terry Riegel

  31. Otto IMGRUND
    November 25th, 2010 at 15:14 | #31

    Congratulation this is a very nice tool that Google should integrate in their APIs.
    I’ve a question for an issue for what I can’t find an answer weather at Chad nor at Google Calendar.
    I’ve multiple calendars that I want to combine in one Calendar-Map.
    Google doesn’t allow to subscribe to more then one feed-URL for one calendar, or I’m wrong?
    In GCM I couldn’t found something like this in the actual version.

    Someone has an idea how to proceed ?

    thank you very much for help oTTo

  1. No trackbacks yet.
Comments are closed.