Showing your events from Google Calendar in Google Maps: Google Calender, Google Maps

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
https://www.google.com/calendar/feeds/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/public/full?futureevents=true&orderby=starttime&singleevents=true&sortorder=ascending

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)

BUT WHAT ABOUT THE MAP?
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>
<html>
<head>
<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');
  georssLayerxx.setMap(map);

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

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:

Select all 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

Document1.jpg

131 KB
edit view

Final Pipe

Document2.jpg

115 KB
pipe view

Final in igoogle

Document3.jpg

38 KB
igoogle view

Showing your events from Google Calendar in Google Maps

Showing your events from Google Calendar in Google Maps

Google Calender

Google Maps

Hypertext Markup Language (HTML)

About The Author

More Articles From cs97jjm3

Comments

Add your Comment

Top HTML Experts