<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Showing your events from Google Calendar in Google Maps

Published on
11,424 Points
5,124 Views
3 Endorsements
Last Modified:
Approved
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
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 -----------------------

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
3
Comment
0 Comments

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Join & Write a Comment

In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month