Showing your events from Google Calendar in Google Maps

Published on
11,314 Points
3 Endorsements
Last Modified:
James Murrell
It's me... if google cannot help i can

Showing your events from Google Calendar in Google Maps

Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thought it would be ideal to have google maps read my calendar.)

First off you need to get a public feed from Google Calendar

The Calendar Address is the public address for your calendar. With this address, others can subscribe to your public calendar, view your events via feed readers, and view a read-only version of your calendar directly in their browser.  Your calendar must be public in order for your friends to use your Calendar Address. To edit the amount of information available, click the Change sharing settings link. Your calendar must be public in order for others to use your Calendar Address. If you wish to keep your calendar private, it will only be accessible by those who have direct sharing privileges. You can change the amount of information available at your calendar's public address by clicking the Change sharing settings link in the Calendar Address section.

To obtain your calendar's address, please follow these steps:

In the calendar list on the left side of the page, click the down-arrow button next to the appropriate calendar, then select Calendar settings. In the Calendar Address section, click the XML or HTML button. A pop-up window with your calendar's public URL will appear.
Use this URL to access your calendar information. - taken from Google calendar help (http://support.google.com/calendar/bin/answer.py?hl=en-GB&ctx=tltp&answer=34578)

OK I would recommend that you right click on the XML button and copy link address
Open Notepad or your editor and save this link there.it will be something like

Please change xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx to your details

if yours has
https://www.google.com/calendar/feeds/ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx /public/basic
dont panic - just change word basic to full and then add ?futureevents=true&orderby=starttime&singleevents=true&sortorder=ascending

...save file so you don’t lose it....

Next up, is to learn yahoo pipes:

Pipes is a powerful composition tool to aggregate, manipulate, and mash up content from around the web. Like UNIX pipes, simple commands can be combined together to create output that meets your needs:
•      combine many feeds into one, then sort, filter and translate it.
•      Geocode your favourite feeds and browse the items on an interactive map.
•      Power widgets/badges on your web site.
•      grab the output of any Pipes as RSS, JSON, KML, and other formats. –
Taken from yahoo pipes (http://pipes.yahoo.com/pipes/docs?doc=overview)
OK you have to have yahoo id (sorry) -you will need one. A must read is http://pipes.yahoo.com/pipes/docs but to be honest after playing with it for minutes, it was very easy to understand.
OK now to http://pipes.yahoo.com/pipes/pipe.info?_id=7773c39ab9e33b5cf96e468379130ea2 is my public version of a pipe.
You could run mine: and you would see my calendar events: but ideally you would click either "Edit Source" or "Clone" - these make you a copy of my pipe.

•      The edit you will see the URL feed change to yours - (remember in the txt file)
•      click save, then click play pipe (at top of page)
•      you should then see you Google calendar events in maps.
•      you can then export to different formats even have on igoole pages etc....
if you click on the XML button and copy link address to you txt file (we need it later)

ok you could go to http://code.google.com/apis/maps/index.html and read all about API's for the next 2 years, or, you could just use code from your pipe KML or RSS to read very basic HTML

what I did was copy the code from view-source : http://code.google.com/apis/maps/documentation/javascript/examples/layer-georss.html and saved as HMTL file

------------------------------------html code ----------------------------
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer GeoRSS</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
  var myLatlng = new google.maps.LatLng(40.65, -73.95);
  var myOptions = {
    zoom: 1,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var georssLayer = new google.maps.KmlLayer('http://pipes.yahoo.com/pipes/pipe.run?_id=????????????????????????????????&_render=rss');

<body onload="initialize()">
  <div id="map_canvas"></div>
---------------------end html code -----------------------

Open in new window

1st thing is to change code so that it works for you
@ line 12 change  var myLatlng = new google.maps.LatLng(40.65, -73.95);  to be your ideal Latitude and Longitude for viewing of the map

I did this by going to http://universimmedia.pagesperso-orange.fr/geo/loc.htm and entering my postcode....
you will get something like  
Latitude      Longitude
52.57904      -0.21062

so code becomes var myLatlng = new google.maps.LatLng(52.57904,-0.21062);

next code change is at line 21
  var georssLayer = new google.maps.KmlLayer('http://pipes.yahoo.com/pipes/pipe.run?_id=????????????????????????????????&_render=rss');
we need to change this to your pipes KML or RSS file
  var georssLayer = new google.maps.KmlLayer('http://pipes.yahoo.com/pipes/pipe.run?_id=ccd951689bb98973cbf7b1d173dd820e&_render=rss');

save html file. You can now publish this file to your web server and like magic your calendar appears when you open the page in your browser.

Pipe Edit View
  edit view
Final Pipe
  pipe view
Final in igoogle
 igoogle view

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Join & Write a Comment

In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month