Google Calendar Map
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.
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?
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.
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…)
Of course you can link to it. Let me know if you run into any problems or have any suggestions.
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
I had a buddy try it in Chrome and Firefox on XP. Chrome worked great, Firefox… not yet.
This is excellent work. A question: why does Google Calendar Map only load 25 events?
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.
@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
@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
@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
Working pretty well now. Thanks.
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
@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
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
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.