google.load("feeds",  "2");

var feed = new google.feed.push.Feed("example.com/atom.xml");
feed.subscribe(myCallback);

function myCallback() {
  var container = document.getElementById("feed");
  for (var i = 0; i < result.feed.entries.length; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode(result.feed.entries[i].title));
    container.appendChild(div);
  }
}

google.load("feeds",  "2");

var feed = new google.feed.push.Feed("example.com/atom.xml");
feed.subscribe(myCallback);

function myCallback() {
  var container = document.getElementById("feed");
  for (var i = 0; i < result.feed.entries.length; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode(result.feed.entries[i].title));
    container.appendChild(div);
  }
}

var searcher = new google.search.ImageSearch();
searcher.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,
                        google.search.ImageSearch.RIGHTS_MODIFICATION);

&as_rights=
 (cc_publicdomain|cc_attribute|cc_sharealike|cc_noncommercial).-(cc_nonderived)

var searcher = new google.search.ImageSearch();
searcher.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,
                        google.search.ImageSearch.RIGHTS_MODIFICATION);

&as_rights=
 (cc_publicdomain|cc_attribute|cc_sharealike|cc_noncommercial).-(cc_nonderived)

To create this page we wrote a simple form in HTML and added JavaScript to add the "Google Custom Search" branding in the search box. View source to see all the details.

When the user submits the form, they are taken to a results page which has the following HTML structure:

    <div id="results">Loading...</div>

We then tell the search library to draw its search box and results in the div we just created:

        // Draw the control in content div
        customSearchControl.draw('results');

Since the user came to this page from our search form, their query terms are now part of the page URL, so all we need to do now is extract them and execute their query:

      function getQuery() {
        var url = '' + window.location;
        var queryStart = url.indexOf('?') + 1;
        if (queryStart > 0) {
          var parts = url.substr(queryStart).split('&');
          for (var i = 0; i < parts.length; i++) {
            if (parts[i].substr(0, 1) == 'q') {
              return unescape(parts[i].split('=')[1].replace(/\+/g, ' '));
            }
          }
        }
        return '';
      }

      // See the source code of the results page for full details.

      ...
  

        // Run a query
        customSearchControl.execute(getQuery());

There is one more optional setting that you might be interested in. The second page which we've just created contains a search box that will allow the user to perform searches on this same page. If you would prefer for the search box not to appear on this results page we can add the following HTML to the page:

    <input style="display:none" id="hidden-input" />

We hide the input box because we don't want the Ajax search library to render the usual query input box, just to show the results. We then tell the search library to draw its search box in the hidden input, making it invisible:

        // Set drawing options to use our hidden input box.
        var drawOptions = new google.search.DrawOptions();
        drawOptions.setInput(document.getElementById('hidden-input'));

        // Change the draw call to include our new options.
        customSearchControl.draw('results', drawOptions);

To see an example of a two-page search setup with a hidden query input, visit this page.

To learn more about the Google Custom Search API, read our documentation. If you run into any problems while setting this up, post your question in our discussion group or hop on our IRC channel.

To create this page we wrote a simple form in HTML and added JavaScript to add the "Google Custom Search" branding in the search box. View source to see all the details.

When the user submits the form, they are taken to a results page which has the following HTML structure:

    <div id="results">Loading...</div>

We then tell the search library to draw its search box and results in the div we just created:

        // Draw the control in content div
        customSearchControl.draw('results');

Since the user came to this page from our search form, their query terms are now part of the page URL, so all we need to do now is extract them and execute their query:

      function getQuery() {
        var url = '' + window.location;
        var queryStart = url.indexOf('?') + 1;
        if (queryStart > 0) {
          var parts = url.substr(queryStart).split('&');
          for (var i = 0; i < parts.length; i++) {
            if (parts[i].substr(0, 1) == 'q') {
              return unescape(parts[i].split('=')[1].replace(/\+/g, ' '));
            }
          }
        }
        return '';
      }

      // See the source code of the results page for full details.

      ...
  

        // Run a query
        customSearchControl.execute(getQuery());

There is one more optional setting that you might be interested in. The second page which we've just created contains a search box that will allow the user to perform searches on this same page. If you would prefer for the search box not to appear on this results page we can add the following HTML to the page:

    <input style="display:none" id="hidden-input" />

We hide the input box because we don't want the Ajax search library to render the usual query input box, just to show the results. We then tell the search library to draw its search box in the hidden input, making it invisible:

        // Set drawing options to use our hidden input box.
        var drawOptions = new google.search.DrawOptions();
        drawOptions.setInput(document.getElementById('hidden-input'));

        // Change the draw call to include our new options.
        customSearchControl.draw('results', drawOptions);

To see an example of a two-page search setup with a hidden query input, visit this page.

To learn more about the Google Custom Search API, read our documentation. If you run into any problems while setting this up, post your question in our discussion group or hop on our IRC channel.

To specify a site, use the setSiteRestriction method on an ImageSearch object. Here is a simple example:

http://code.google.com/apis/ajax/playground/#site_restrict

We can do more than just provide a site-specific image search box, we could also use the search results in a unique way. For example, we could create a slideshow which shows images which match our desired keyword and appear on a specific site. For this example, let's create a simple slideshow that displays images from nasa.gov.

var imageIndex = 0;
var images;

function nextImage() {
 imageIndex++;
 if (imageIndex >= images.length) {
   imageIndex = 0;
 }

 var imageContainer = document.getElementById(
     'image-container');
 imageContainer.src = images[imageIndex].tbUrl;
}

function searchComplete(searcher) {
 if (searcher.results && searcher.results.length > 0) {
   var contentDiv = document.getElementById(
       'content-slideshow');
   contentDiv.innerHTML = '';

   var imageTag = document.createElement('img');
   imageTag['id'] = 'image-container';
   imageTag['src'] = searcher.results[imageIndex].tbUrl;
   images = searcher.results;

   contentDiv.appendChild(imageTag);

   // Switch to the next image every 5 seconds.
   setInterval("nextImage();", 5000);
 }
}

function slideshowOnLoad() {
 var imageSearch = new google.search.ImageSearch();
 imageSearch.setSiteRestriction('nasa.gov');
 imageSearch.setSearchCompleteCallback(
     this, searchComplete, [imageSearch]);
 imageSearch.execute('supernova');
}

google.setOnLoadCallback(slideshowOnLoad);

In the above samples, there are three lines I'd like to call your attention to. The first line to note is the imageSearch.execute at the bottom, here we've entered the keywords that our slideshow images should be related to. Next we restrict the site to nasa.gov using imageSearch.setSiteRestriction. Lastly, we call setInterval once we receive the results of our search for images. The setInterval call tells the browser to run our nextImage function every five seconds.

Here are the two samples we've talked about in action:

The site restriction can also include a path within a website. For example you could do setSiteRestriction(
'http://www.flickr.com/photos/<username>') to search the photos that have been posted by a particular user on flickr.

To learn more about some other neat features of the AJAX Image Search API take a look at our code playground samples and documentation. For questions on this and other topics, drop us a line in the discussion group.

To specify a site, use the setSiteRestriction method on an ImageSearch object. Here is a simple example:

http://code.google.com/apis/ajax/playground/#site_restrict

We can do more than just provide a site-specific image search box, we could also use the search results in a unique way. For example, we could create a slideshow which shows images which match our desired keyword and appear on a specific site. For this example, let's create a simple slideshow that displays images from nasa.gov.

var imageIndex = 0;
var images;

function nextImage() {
 imageIndex++;
 if (imageIndex >= images.length) {
   imageIndex = 0;
 }

 var imageContainer = document.getElementById(
     'image-container');
 imageContainer.src = images[imageIndex].tbUrl;
}

function searchComplete(searcher) {
 if (searcher.results && searcher.results.length > 0) {
   var contentDiv = document.getElementById(
       'content-slideshow');
   contentDiv.innerHTML = '';

   var imageTag = document.createElement('img');
   imageTag['id'] = 'image-container';
   imageTag['src'] = searcher.results[imageIndex].tbUrl;
   images = searcher.results;

   contentDiv.appendChild(imageTag);

   // Switch to the next image every 5 seconds.
   setInterval("nextImage();", 5000);
 }
}

function slideshowOnLoad() {
 var imageSearch = new google.search.ImageSearch();
 imageSearch.setSiteRestriction('nasa.gov');
 imageSearch.setSearchCompleteCallback(
     this, searchComplete, [imageSearch]);
 imageSearch.execute('supernova');
}

google.setOnLoadCallback(slideshowOnLoad);

In the above samples, there are three lines I'd like to call your attention to. The first line to note is the imageSearch.execute at the bottom, here we've entered the keywords that our slideshow images should be related to. Next we restrict the site to nasa.gov using imageSearch.setSiteRestriction. Lastly, we call setInterval once we receive the results of our search for images. The setInterval call tells the browser to run our nextImage function every five seconds.

Here are the two samples we've talked about in action:

The site restriction can also include a path within a website. For example you could do setSiteRestriction(
'http://www.flickr.com/photos/<username>') to search the photos that have been posted by a particular user on flickr.

To learn more about some other neat features of the AJAX Image Search API take a look at our code playground samples and documentation. For questions on this and other topics, drop us a line in the discussion group.

There are three possible ways to implement, depending on how you're using the API:

1. If you use the loader, you can simply load jsapi on the domain you're interested in (example), such as:
   

   <script src="http://www.google.es/jsapi"></script>



2. Alternately, you can set this with the web search object's .setRestriction method (example):
   

   var ws = new google.search.WebSearch();
   ws.setRestriction(google.search.Search.RESTRICT_EXTENDED_ARGS,
                     {'gl' : 'es'});

3. Finally, if you're using the RESTful interface, all you have to do is append a "gl" URL parameter to your request:
   

   http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=flowers&gl=fr

Most valid country codes will work, as long as Google has a home page on that country's top level domain (e.g. google.es). If you use an invalid or unsupported country code, you'll get an error message letting you know.

We're excited to bring you this addition to the API, and look forward to seeing the innovative ways in which you use this new feature to improve your users' experience. Please drop us a line with your thoughts (or questions) on our discussion group.

There are three possible ways to implement, depending on how you're using the API:

1. If you use the loader, you can simply load jsapi on the domain you're interested in (example), such as:
   

   <script src="http://www.google.es/jsapi"></script>



2. Alternately, you can set this with the web search object's .setRestriction method (example):
   

   var ws = new google.search.WebSearch();
   ws.setRestriction(google.search.Search.RESTRICT_EXTENDED_ARGS,
                     {'gl' : 'es'});

3. Finally, if you're using the RESTful interface, all you have to do is append a "gl" URL parameter to your request:
   

   http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=flowers&gl=fr

Most valid country codes will work, as long as Google has a home page on that country's top level domain (e.g. google.es). If you use an invalid or unsupported country code, you'll get an error message letting you know.

We're excited to bring you this addition to the API, and look forward to seeing the innovative ways in which you use this new feature to improve your users' experience. Please drop us a line with your thoughts (or questions) on our discussion group.

As a short example, I've created the following simple demo which just detects whether Google Chrome Frame is installed or not with an alternate message if you are in a browser for which this plugin is not available.

Ben Lisbakken has also added detection for Google Chrome Frame to the Ajax Playground. If you view source on the page you can see another example of a customized CFInstall.check implementation which is designed to fit the page.

For more details on the Google Chrome Frame Ajax API, see the documentation and for questions, please visit the discussion group.

As a short example, I've created the following simple demo which just detects whether Google Chrome Frame is installed or not with an alternate message if you are in a browser for which this plugin is not available.

Ben Lisbakken has also added detection for Google Chrome Frame to the Ajax Playground. If you view source on the page you can see another example of a customized CFInstall.check implementation which is designed to fit the page.

For more details on the Google Chrome Frame Ajax API, see the documentation and for questions, please visit the discussion group.

We've added the ability to use machine translation to or from the following languages:

• Afrikaans
• Belarusian
• Icelandic
• Irish
• Macedonian
• Malay
• Persian
• Swahili
• Welsh
• Yiddish

With the addition of the above the total count for language pair combination comes to a mind boggling 2550 pairs. In addition, we find the above additions exciting because, for the first time, African languages are available through the API and we now support all 23 Official European Union languages.

A few months ago we announce our virtual keyboard API and this month we've added nine new keyboard layouts:

• Bulgarian
• Czech
• Greek
• Hebrew
• Hungarian - 101 layout
• Slovak
• Slovenian
• Turkish - Q layout
• Ukrainian - 101 layout

Here's a simple example of using the Slovak keyboard layout.

We've added the ability to use machine translation to or from the following languages:

• Afrikaans
• Belarusian
• Icelandic
• Irish
• Macedonian
• Malay
• Persian
• Swahili
• Welsh
• Yiddish

With the addition of the above the total count for language pair combination comes to a mind boggling 2550 pairs. In addition, we find the above additions exciting because, for the first time, African languages are available through the API and we now support all 23 Official European Union languages.

A few months ago we announce our virtual keyboard API and this month we've added nine new keyboard layouts:

• Bulgarian
• Czech
• Greek
• Hebrew
• Hungarian - 101 layout
• Slovak
• Slovenian
• Turkish - Q layout
• Ukrainian - 101 layout

Here's a simple example of using the Slovak keyboard layout.

We start with a Custom Search Element, which uses the CustomSearchControl to add a Custom Search Engine to my web page. If you've never used a Custom Search engine before, I think you'll find a lot to love: it uses Google's search technology to include a specific group of websites for indexing, and you can share in ad revenue.

One of the many benefits of using the AJAX Search APIs to dynamically add search capabilities to your web pages is that you can also control the look and feel of the search input and results by using open web standards like cascading style sheets (CSS). When you combine this styling with Custom Search, you can create a seamless search experience for your users.

You can begin by changing the search input box (dynamically added to your page by default) to use an input box that you've placed on the page wherever you like.

// Set drawing options to use my text box
// as input instead of having the library create one.
var drawOptions = new google.search.DrawOptions();
drawOptions.setInput(
    document.getElementById('query_input'));

// Draw the control in content div
customSearchControl.draw(
    'results', drawOptions);

With the above changes we get a page that looks like this:

Now that we're able to use a Custom Search box (look ma, no button push required!) we can add CSS rules to change fonts, colors, and more in the search results.

For example, see: http://ajax-apis.appspot.com/cse-style which has CSS rules that effect the styling of the search results and compare it to our first step which uses the default styles.

Take a look at the CSS rules to get an idea for how this works, and how you can do custom styling to fit your own website.

We can change the font and add a border around each search result:

#results .gsc-results {
  /* Sets font for titles, snippets, and URLs. */
  font-family: arial, helvetica, sans-serif;
}

#results .gsc-result {
  position: relative;
  border: 1px solid #eee;
  border-left: 10px solid #eee;
  padding: 8px 8px 8px 20px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

We can also change the style of a single result when the user moves the mouse cursor over it:

#results .gsc-result:hover {
  border: 1px solid #888;
  border-left: 10px solid #888;
}

These are just a couple of examples. Since the CSS styling is handled by the browser, you can use any supported CSS rules to select portions of the search results. For more information on the result HTML structure and the CSS classes you may want to select in your own customizations, see the documentation on styling AJAX Search results.

We start with a Custom Search Element, which uses the CustomSearchControl to add a Custom Search Engine to my web page. If you've never used a Custom Search engine before, I think you'll find a lot to love: it uses Google's search technology to include a specific group of websites for indexing, and you can share in ad revenue.

One of the many benefits of using the AJAX Search APIs to dynamically add search capabilities to your web pages is that you can also control the look and feel of the search input and results by using open web standards like cascading style sheets (CSS). When you combine this styling with Custom Search, you can create a seamless search experience for your users.

You can begin by changing the search input box (dynamically added to your page by default) to use an input box that you've placed on the page wherever you like.

// Set drawing options to use my text box
// as input instead of having the library create one.
var drawOptions = new google.search.DrawOptions();
drawOptions.setInput(
    document.getElementById('query_input'));

// Draw the control in content div
customSearchControl.draw(
    'results', drawOptions);

With the above changes we get a page that looks like this:

Now that we're able to use a Custom Search box (look ma, no button push required!) we can add CSS rules to change fonts, colors, and more in the search results.

For example, see: http://ajax-apis.appspot.com/cse-style which has CSS rules that effect the styling of the search results and compare it to our first step which uses the default styles.

Take a look at the CSS rules to get an idea for how this works, and how you can do custom styling to fit your own website.

We can change the font and add a border around each search result:

#results .gsc-results {
  /* Sets font for titles, snippets, and URLs. */
  font-family: arial, helvetica, sans-serif;
}

#results .gsc-result {
  position: relative;
  border: 1px solid #eee;
  border-left: 10px solid #eee;
  padding: 8px 8px 8px 20px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

We can also change the style of a single result when the user moves the mouse cursor over it:

#results .gsc-result:hover {
  border: 1px solid #888;
  border-left: 10px solid #888;
}

These are just a couple of examples. Since the CSS styling is handled by the browser, you can use any supported CSS rules to select portions of the search results. For more information on the result HTML structure and the CSS classes you may want to select in your own customizations, see the documentation on styling AJAX Search results.

google.load("elements", "1", {
 packages: "keyboard"
});

var kbd = new google.elements.keyboard.Keyboard(
 [google.elements.keyboard.LayoutCode.Arabic],
 ['myTextArea']);

This gives you the control to provide a better user experience, even for multilingual websites. By creating multiple keyboards with different layouts, each text field can be bound to the appropriate keyboard - and the user will see only the keyboard attached to whichever text field has the focus.

But don't take my word for it - check out a sample for yourself. Notice that in addition to allowing users to click on the virtual keyboard, it also temporarily transforms the key assignments on their physical keyboard, allowing rapid typing for those users accustomed to a given layout.

With this initial release, we are launching 5 language layouts. They are:

We plan to roll out support for more keyboard layouts in the future. But in the meantime, read through the class reference and see the rest of the Code Playground samples.

After you've had time to experiment, let us know what you think and which other layouts you'd like to see. Feedback is always welcome in our support forum and IRC channel.

google.load('ext-core', '3.0');
google.load('ext-core', '3', {uncompressed : true});

google.load('ext-core', '3.0');
google.load('ext-core', '3', {uncompressed : true});

<script src="/jsapi?key=YOUR_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
 google.load("maps", "2");
 var opts = {

    googleBarOptions : {
      style : 'new',   // This tag is necessary for the first few weeks until the new UI becomes default
      adsOptions : {
        client : ####  // Your Google AdSense publisher ID
      }
    }
  }
  map = new GMap2(document.getElementById("map"), opts);
  map.setCenter(new GLatLng(33.956461,-118.396225), 13);
  map.enableGoogleBar();
</script>

<iframe src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?format=300x250"
        frameborder="0" width="300" height="250"
        marginwidth="0" marginheight="0">
</iframe>

<head>
  <script src="http://www.google.com/jsapi" type="text/javascript"
          charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  google.load('yui', '2.6.0');
  function init() {
    var loader = new YAHOO.util.YUILoader({
      require: ["button", "calendar"],
      base: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
      onSuccess: function() {
        // start playing with buttons and calendars!
      }
    });
    loader.insert();
  }
  google.setOnLoadCallback(init);
  </script>
</head>
<body>
  <div id="calContainer"></div>
</body>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/button/assets/skins/sam/button.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/button/button-min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/calendar/calendar-min.js"></script>

<div class="gsc-control">
    <!-- FYI: This form is the same as the google.search.SearchForm -->
    <form class="gsc-search-box">
        <table class="gsc-search-box">
            <tbody>
                <tr>
                    <td class="gsc-input">
                        <!-- This next input is the search box itself -->
                        <input class="gsc-input/>
                    </td>
                    <td class="gsc-search-button">
                        <!-- This next input is the search button itself -->
                        <input class="gsc-search-button"/>
                    </td>
                    <td class="gsc-clear-button">
                        <!-- This next div is the clear button (i.e., the little x) -->
                        <div class="gsc-clear-button"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="gsc-branding">
            <tbody>
                <tr>
                    <td class="gsc-branding-user-defined"/>
                    <td class="gsc-branding-text">
                        <div class="gsc-branding-text">powered by</div>
                    </td>
                    <td class="gsc-branding-img">
                        <img class="gsc-branding-img"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <!-- In tabbed mode, this is where the tabs will appear; in stacked mode, this will be absent! -->
    <div class="gsc-tabsArea">
        <!-- The following div would be the active tab -->
        <div class="gsc-tabHeader gsc-tabhActive"/>
        <!-- These spacer divs will appear AFTER every tab to do exactly what their className would imply -->
        <div class="gs-spacer"/>
        <!-- And this one would be an inactive tab -->
        <div class="gsc-tabHeader gsc-tabhInactive"/>
        <div class="gs-spacer"/>
    </div>
    <div class="gsc-resultsBox-visible">
        <!-- The next divs contain the actual results. The classes in square brackets are ONLY present in TABBED mode -->
        <!-- This would be the active tab -->
        <div class="gsc-resultsRoot [gsc-tabData gsc-tabdActive]">
            <table class="gsc-resultsHeader">
                <tbody>
                    <tr>
                        <td class="gsc-twiddleRegionCell gsc-twiddleRegion-opened">
                            <div class="gsc-twiddle">
                                <!-- This next div will contain your searcher's title or label (e.g., Local), but it won't be visible in tabbed mode -->
                                <div class="gsc-title"/>
                            </div>
                            <!-- This next div will contain your search's estimated result count, but it's invisible in tabbed mode, too! -->
                            <div class="gsc-stats">
                            <!-- This is the selector that chooses 1, 4, or 8 visible results. Please note that only ONE of the options in square brackets will be visible -->
                            <div class="gsc-results-selector [gsc-one-result-active OR gsc-more-results-active OR gsc-all-results-active]">
                                <div class="gsc-result-selector gsc-one-result"/>
                                <div class="gsc-result-selector gsc-more-results"/>
                                <div class="gsc-result-selector gsc-all-results"/>
                            </div>
                        </td>
                        <td class="gsc-configLabelCell">
                            <!-- This next span will only be present if the searcher has configuration options -->
                            <!-- Also, it will only have ONE of the options in square brackets, depending on whether or not the configuration form is visible or not -->
                            <span class="gsc-configLabel [gsc-twiddle-closed OR gsc-twiddle-opened]"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- This next div is the configuration form for a searcher. It is only present if the searcher has configuration options -->
            <!-- The exact className of the config form will depend on the type of searcher. So you'll only have ONE of the options below.  You can probably figure out which one your searcher will have -->
            <!-- By the way, I have no idea why it's gsc-locationConfig instead of gsc-localConfig :) -->
            <div class="gsc-config [gsc-locationConfig OR gsc-videoConfig OR gsc-blogConfig OR gsc-newsConfig OR gsc-patentConfig]">
                <!-- The exact content of the config div will vary depending on your searcher's options -->
                <!-- Use Firefox with Firebug to explore the possibilities here! -->
            </div>
            <div class="gsc-results [gsc-localResult OR gsc-webResult OR gsc-blogResult OR gsc-newsResult OR gsc-imageResult OR gsc-bookResult OR gsc-patentResult OR gsc-videoResult]">
                <!-- This is your FIRST actual search result. All results will follow this pattern -->
                <!-- Please note, again, that only ONE of the classNames in the square brackets will apply, depending on the searcher -->
                <div class="gsc-result [gsc-localResult OR gsc-webResult OR gsc-blogResult OR gsc-newsResult OR gsc-imageResult OR gsc-bookResult OR gsc-patentResult OR gsc-videoResult]">
                    <!-- The contents of this div will be the same as outlined in the documentation for your searcher's results -->
                </div>
                <div class="gsc-expansionArea">
                    <!-- This is where the REST of your search results show up, again following the same pattern as above -->
                </div>
            </div>
        </div>
        <!-- And the inactive one -->
        <div class="gsc-resultsRoot [gsc-tabData gsc-tabdInactive]">
            <!-- All the rest of the structure of this is the same as above -->
    </div>
</div>

• Catalan (ca)
  
• Filipino (tl)
  
• Hebrew (iw)
  
• Indonesian (id)
  
• Latvian (lv)
  
• Lithuanian (lt)
  
• Serbian (sr)
  
• Slovak (sk)
  
• Slovenian (sl)
  
• Ukrainian (uk)
  
• Vietnamese (vi)

<iframe 
  title="In the News" 
  style="border: 0px none ; margin-left: 1em; width: 540px; height: 530px;" 
  src="http://www.google.com/uds/gadgets/inthenews/iframe.html" 
  frameborder="0">
</iframe>

<style>
  @import url("http://www.google.com/uds/gadgets/inthenews/inthenews.css");
  body {
    font-family: "arial", sans-serif;
    font-size: 11px;
  }
</style>

<script src="http://www.google.com/uds/gadgets/inthenews/inthenews.js"></script>
<script src="http://www.google.com/jsapi/" type="text/javascript"></script>

<!--[if IE]>
  <script type="text/javascript" 
    src="http://www.google.com/uds/gadgets/inthenews/excanvas.js"></script>
<![endif]-->

<script type="text/javascript">
  google.load("search", "1");
  google.setOnLoadCallback(initialize, true);

  function initialize() {
    var options = {
      format : "513x500",
      useNav : true
    };
    new InTheNews("itnId-513x500", options);
  }
</script>
</head>

<body>
  <div id="itnId-513x500"></div>
</body>

/**
 * Set the currentState_ and currentCountry_ properties based on the client's
 * current location (when available and in the US), or to the defaults.
 */
InTheNews.prototype.setDefaultLocation_ = function() {
  this.currentState_ = this.options_.startingState;
  if (google.loader.ClientLocation &&
      google.loader.ClientLocation.address.country_code == "US" &&
      google.loader.ClientLocation.address.region) {

    // geo locate was successful and user is in the states. range check
    // the region so that we can safely use it when selecting a state
    // level polygon overlay
    var state = google.loader.ClientLocation.address.region.toUpperCase();
    if (InTheNews.stateNames[[]state]) {
      this.currentState_ = state;
    }
  }
  this.currentCountry_ = "US";
}