A Web Developer’s Guide to the Google Code PlayGround

If you haven’t heard about Google’s Code Playground, it’s a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. In this article we’ll tell you what you can do with it, give you a couple of examples and show you why you should be playing in the playground!

Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box. APIs you can work with include:

• Language
  
• Blogger
  
• Blog Search
  
• Book Search
  
• Calendar
  
• Earth
  
• Feeds
  
• Friend Connect
  
• Image Search
  
• JavaScript
  
• Libraries
  
• Local Search
  
• Maps
  
• Maps V3
  
• News Search
  
• Patent Search
  
• Search
  
• Video Search
  
• Visualization
  
• Web Search
  
• YouTube
  

By selecting an API from the list, you are able to select a function from that API, which then shows the code used in the pane to the right. You can view the API code itself, or the entire web page containing the code. Below the API pane and the Edit Code pane is the Output pane, which shows you what the code shown in the pane above is doing–visually and in real time. Make a change in the code above, click Run Code and you can see what the changes you made did to the Output. You can save the code and use it on your own site.

The Libraries API, for instance, allows you to select jQuery, jQueryUI, MooTools, Dojo and Prototype Scriptaculous. Using these APIs, you can make a div area slide up and down a page, make text fade in and out, tween the colors of text, create draggable divs, and all sorts of other slick effects.

The Feeds API allows you to add feeds to your page, control the display, load more than one feed at a time, and otherwise manipulate the feeds. The YouTube API enables you to embed a simple player, make a re-sizable player, change the playing video, work with multiple players, and create a chromeless player, i.e. a player with no controls.

Google’s Code Playground works in your web browser, and although Google would prefer that you use their own Chrome browser, it also works in MSIE, Firefox and Opera. The Google Earth API is included, and there are a myriad of functions you can play with, including the ability to embed Google Earth in a web page, already focused on a specific location. Or allow users to fetch a KML (sort of a URL for a specific location) and have Google earth go to that location. Very slick stuff, as you can see here:

The Language API allows you to create translation services on your website, including the ability to embed virtual keyboards in other languages, such as Russian, as shown below:

The Local Search API allows you to provide local search results for specific search words or phrases, for specific locations. Here I searched for Kissimmee, FL, and “coffee”:

This “playground” has a lot of potential. It’s not only fun to try out all the Google APIs, but it actually creates both the code itself, and a page with that code embedded. You can save the code that you have produced, and use it on your own sites. While it isn’t exactly WYSIWYG, it is intuitive and easy enough to use that if can become another valuable tool in the web developer’s toolbox.