Using Google Playground Examples in VS.NET

I’ve been working on ways to leverage Google’s Calendar API to publish Falafel’s training calendar entries to the web. One of the things I stumbled into was the Google Code Playground which is a cool tool for testing out various Google API’s. The Playground includes Firebug lite which is also something I hadn’t run into, I love finding new cool things!

At any rate, this post is about how to get from the Playground to something live. In the screenshot to the right you can see the JavaScript source code in a code editor at the top right hand side of the screen. The missing piece here is that to get the code from the Playground to work on your own site you need to do a few things. First, you have to get an API Key. Once you’ve done that you can then add a <script> tag to include the Google GData API in your page.

    <script src="http://www.google.com/jsapi?key=<your_key>" type="text/javascript"></script>

After, that you need to initialize the GData API and get the code from the Playground to execute. To do that I did two things.

1. Wrapped the JavaScript code from the Playground page in a function.
2. Added the following code to my page with a reference to call the JavaScript function

    <script type="text/javascript">
        //<![CDATA[

        google.load("gdata", "1");
        google.setOnLoadCallback(loadItems);
        //]]>
    </script>

”loadItems” above is the name of the function I created in Step 1. Next, I had to add a DIV tag to the page as a target for the new content:

<div id="content">
</div>

At this point, the page (plain HTML) can be debugged from VS.NET and/or uploaded to your domain and function correctly. Anyway, I learned a few things along the way and thought this might be useful.