Google Calendar Map
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!
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.
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
@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)
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.
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.
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?
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!
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?
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.
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!
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?
Never Mind I found the view whole year button sorry. 🙁
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!
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.
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
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