Google AJAX Search API Blog

Web Search in Your Country

2009-10-12T11:23:00.000-07:00

I am happy to announce the addition of the ability to scope your searches to a specific country in the AJAX Web Search API. Now, if you have a lot of visitors in Madagascar, you can make sure that the search results displayed on your site are tailored to them. All it takes is a small change to your code.

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

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>
```

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'});

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.

Google Chrome Frame Ajax Detection

2009-09-28T09:42:00.000-07:00

In partnership with the Google Chrome Frame team, we are making available a library to allow your web application to detect the presence of Google Chrome Frame. We on the Ajax team are excited about the possibilities of this add-on improving JavaScript performance and enabling some of the new features available in HTML5. If you have a web application which makes use of these new features, you can use this library to prompt the user to install Google Chrome Frame, or recognize when a user has just installed it. The library provides granular controls so that you can create the user experience which best suits your site.

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.

Do you have Google Chrome Frame installed?

We're checking on that now.

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.

More Languages, More Keyboards

2009-09-15T10:14:00.000-07:00

The language APIs keep right on trucking, released recently are a handful of new translation languages, pairs, and keyboard layouts.

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.

Custom Search with Custom Style: Peanut Butter and Jelly

2009-08-10T10:21:00.000-07:00

Creating a custom look and feel for your website can have significant benefits in everything from improving usability to setting a professional or playful tone for your website. In many cases, letting users search the content of your site and related sites gets them the information they need faster. After all, a speedy user experience is a happy user experience. Here are some examples of how Custom Search and custom styles are as easy (and delicious) as peanut butter and jelly.

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.

Behind the scenes with two AJAX API Developers

2009-07-20T17:59:00.000-07:00

We enjoy featuring real-world applications that show how versatile the AJAX APIs can be. Below we're highlighting two very different apps and the developers who built them:

AroundMe
AroundMe is an iPhone application where the AJAX APIs are central to the user experience. Specifically, the app utilizes the Local Search API to enable users to find information about their surroundings. In the videos below, Marco Pifferi (the developer behind AroundMe) gives a demo of his app, his thoughts on using the AJAX APIs, and tips for integrating them in mobile apps.

Mibbit
Mibbit is a web-based chat application that uses the AJAX APIs to enhance the chat experience. The language APIs help users to translate their messages into a number of different languages. Mibbit also uses the Maps API and YouTube API to display embedded maps or YouTube videos if a user includes a Maps or YouTube URL in their chat. Jimmy Moore, creator of Mibbit, walks through Mibbit in his video below.

Do you have a great app that uses the AJAX APIs? Submit a video about it and we may feature it on this blog. Questions? Stop by our support forum or IRC channel.

Introducing the Virtual Keyboard API

2009-06-22T12:07:00.000-07:00

It is often difficult for Internet users to input text in many non-Latin script-based languages for a variety of reasons. The correct keyboard layout may not be installed on the computer they're using - sometimes such a layout may not be well developed or widely available. This poses a challenging problem for web developers because there is no way they can ensure that their users have access to this very basic input technology. Our Transliteration API can help, but requires that the user know multiple languages.

Right on the heels of introducing support for translating Persian (Farsi), we've added a new Virtual Keyboard API into the Google AJAX Language API to further assist with text input. With this, developers can help their users input text without relying on the right software being installed on the computer they happen to be using.

It couldn't be easier to get this on your page. Simply load the right package:

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

Then create a keyboard, specifying the keyboard layout and text field to bind to:

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

And here's what it looks like:

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:

Arabic (العربية)
Hindi (हिन्दी)
Polish (Polski)
Russian (Русский)
Thai (ไทย)

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.

Ext-core ready to go

2009-06-11T09:35:00.000-07:00

Recently, the guys over at Ext JS released ext-core under an MIT license, which was a big win for open source! Today, they released a stable (non-beta) version of this library and we are proud to be part of that announcement by hosting the new version. You can now pull ext-core from Google servers:

// directly access it
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js
// alias the newest 3.0.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
// alias the newest 3.x.x version
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
// directly access the uncompressed code
http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js

You can also use it from the loader:

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

Thanks to all for the requests to add ext-core to our Libraries API, and big thanks to Ext JS for providing their library so openly! For more information, head over to their blog post.

Arabic Transliteration added to the AJAX Language API

2009-06-08T00:23:00.000-07:00

Last year we launched the Transliteration API as an addition to the AJAX Language API. This gave users the ability to transliterate (the process of phonetically converting words from one script into another) text into several Indic languages using a normal English keyboard.

We're happy to announce that we've now added Arabic to the list of supported languages. Now, you can allow your users to easily input Arabic-language text into any text field or text area on your web page without switching to a non-Latin alphabet keyboard - just like on the Labs page. For example, if the user types 'mar7aban bekom', the API will transliterate each word, with the result 'مرحبا بكم' (Arabic for welcome). The API will even automatically adjust the direction of the text area to support this right-to-left language.

Take a look at the documentation and then head over to the Code Playground to give it a try for yourself. If you have any questions, stop by the Google AJAX API developer forum or IRC channel.

AJAX Custom Search Gadget on Blogger

2009-06-01T10:06:00.000-07:00

The AJAX Search gadget for Blogger is now available to all users on Blogger.com. This gadget accesses a Custom Search Engine (CSE) that is created automatically for your blog and provides search results inline, with the look and feel of your blog. You can get all this with just a few clicks from the Blogger control panel.

One cool feature of the gadget is the 'Linked From Here' feature that searches the pages you've linked to from your blog posts. As you create new posts, we automatically update your search engine to include all the linked pages, as well as all the pages linked from your link lists and blog lists. Check out the gadget — the search results match the look and feel of your blog and show up inline, as shown in the screenshot below. You can click a button to dismiss the results when you are done, and go back to reading the current post.

If you are not using Blogger, you can still create something similar for your website using the Custom Search element (read more about this new element at the Custom Search blog).

Easy as 1-2-3 - introducing Google Web Elements

2009-05-27T11:54:00.001-07:00

Today at Google I/O, we launched Google Web Elements with one goal in mind - making life easier for developers. Google Web Elements make it incredibly simple to add Google products to your site, app or blog. It's so easy, you'll feel like you're cheating. Inspired by the convenience of embeddable YouTube videos, Google Web Elements allow you to add products like Google Custom Search, Google Docs, and Google Maps to your website with the simplicity of copy and paste. For instance, here's the new Google News element:

Each element is designed to help you get started quickly without spending time on the deep technical details. Yet behind it all, Google Web Elements are powered by Google's scalable and flexible developer APIs, offering a world of customization just beneath the surface, keeping up with your site as it grows.

For more details, check out the Google Code and Custom Search blogs. Google Web Elements are already available for eight of our most popular products, with more soon to follow. To get started, visit the Google Web Elements homepage and please be sure to let us know what you'd like to see us work on next.

Want to know what else is going on at Google I/O? Follow us on twitter @googleio and twazzup.

AJAX APIs Playground Ver. 2

2009-04-06T10:39:00.000-07:00

I am very pleased to announce version 2 of the AJAX APIs Playground. For those of you not familiar with it, the Playground is an educational application designed to show interactive code samples for some of Google's coolest Javascript APIs. Of the new changes, the most obvious is the sweet new UI, thanks to help from Roman Nurik of the Google Earth team.

The new features are:
* Break points (simulated in Javascript)
* Firebug Lite in output for debugging
* Line numbers in code editor
* Ability to edit HTML of samples

The breakpoints and Firebug Lite additions are my favorite new features. But why did I include Firebug Lite when all web developers (should!) have Firebug installed? Because when code runs on the Playground, it runs in an iFrame. That iFrame does not have the Firebug object initialized in it. Since it is a cross-domain iFrame, there's no simple way to add Firebug to the iFrame's window object, so adding Firebug Lite was the best approach. This makes it so you can now use all of your favorite Firebug debugging convenience functions in the Playground!

To use Firebug Lite and breakpoints, simply click on the line number you want to add a breakpoint to and hit "Debug Code". This will insert Firebug Lite into the output and pause the execution on the breakpoint line number until you to click the play button to continue. Try adding a breakpoint to a line, clicking "Debug Code", then opening Firebug Lite and typing in a variable name to inspect the contents/value of the variable at that point in the code.

Adding breakpoints and forcing Firebug into a local function context were really fun engineering problems, so if you want to check them out (or contribute code to the Playground) go to the open source repository for it, come chat it up on IRC, or talk with me in person at the quickly approaching Google I/O conference (early bird registration runs until May 1).

Also, it's really important that you share your feedback so that I know what you'd like to see in the next version of the Playground! Thanks, and enjoy the Playground!

Making content creation easy with the Google AJAX APIs - Guest post

2009-04-03T09:06:00.000-07:00

We started nextstop.com with the idea that we could make it significantly easier and more fun to discover new and interesting things to do anywhere in the world, based on recommendations from people who know a place well. Whether it was a neat museum, a hidden local restaurant, or a great place to go shopping we wanted to make it super easy and fun for people to share recommendations for their favorite places, wherever they might live.

The trick of course was in how to do this. It was important for us to combine ease of making a recommendation -- our goal was that it should be as simple as entering the name of a place, and a few sentences about why you liked it -- with rich information about a place so it was really useful to others -- photos, contact information, maps, etc. The solution, not surprisingly since I'm writing here, was to use a number of Google's APIs to gather related information about the recommendation and make it easy for our members to include it in their recommendation.

You can best see how this works by going through our recommendation flow, or watching the video below.

Let me walk you through how this is working under the hood:

1) When the page loads, the first thing we do is use the Google loader to load the JQuery and JQuery UI libraries, as well as Google Maps. As part of this, we also grab the user's current location using google.loader.ClientLocation and store the lat/lng if available to use later.

2) In step 1, we ask the user for what's being recommended. We use this string to do a Google local search for business listings and KML results that match, using the user's current location to bound the local search by setting the sll and sspn parameters. Between local business listings and KML results, we can offer incredible global coverage of everything from restaurants to tourist attractions to hole-in-the-wall bars and clubs. We're using the JSON version of the local search API, which we call from our servers using Python's urlopen() so that we can supplement the results with our own database of results.

3) In step 2 we do an image search for related images using Google's image search API. While we let users change the search terms to find just the right picture, often our default image search (which combines the name of the place and a city name) returns great results. There are photos of almost everything, so you can even recommend a particular dish at a restaurant in Taipei and have the photos to go along with it.

4) In step 3, we ask for a few sentences about why that place or activity really stands out to them. After the recommendation has been submitted, we use the Google Language APIs to detect the language of the recommendation, which we can later use to filter content by your language, and we hope to someday integrate the ability to translate recommendations into your language of choice.

Its a very simple and fast process for the user making the recommendation, but the result is a recommendation with address, phone number, map, and photo that is really useful to another user looking to discover something new.

We've built our whole product around the Google APIs, and feel like we're just scratching the surface of what's possible. We're planning to let users add other information (like related websites, searches, news, etc.) using Google's APIs as well.

We'll be at Google I/O on May 27-28 talking about what we've done so far, and will hopefully have a few new uses of the Google APIs to show off at that time. Please come say hello -- we'd love to hear your feedback on nextstop, or share tips on using the Google APIs. You can also check out some of the places recommended near the Moscone center, or add a few of your own!

Carl Sjogreen (co-founder, nextstop.com)

Updated Local Search Control used in brand new GoogleBar

2009-03-17T17:50:00.000-07:00

A much requested feature, the Local Search Control now includes ads when a search is performed. Users will benefit from seeing targeted and relevant sponsored results, and you can benefit by sharing in the revenue of including these results on your site. Ads aren't the only thing that's new - there's also a new (and, we hope you agree, better) UI:

This new Local Search Control has been used in a brand new version of the GoogleBar (part of the Maps API). In almost all cases, the GoogleBar provides the ideal way to add searches to Google Maps. The GoogleBar, too, includes advertisements with the results. In order to share in the revenue, you need to supply your AdSense publisher ID. You can use your existing ID or sign up for a new AdSense account. Once you have an account, get your AdSense publisher ID and include it as an option when you set up the GoogleBar:


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

Optionally, you may also specify an AdSense for Search channel (more info on channels), the Ad Safety Level to associate with your advertising, and the language in which to display results. For a full list of options and details on including them, see the GoogleBar documentation. Note: currently ads only appear for results that are inline - this limitation should be removed within a few weeks.

If you'd like to learn more about the new underlying, low-level Local Search Control, the reference documentation and Code Playground examples contain everything you need to know.

For more information, see this recent post on the Maps API blog. Questions or comments? Please visit the AJAX API and Maps API discussion groups.

Experimental Features

2009-03-05T17:20:00.000-08:00

As part of Tuesday's Google Code Labs announcement, the AJAX Search API became part of the graduating class. We're still working with our lawyerly team members to update our Terms of Use to include a 3-year deprecation policy. If you're curious what that policy will look like, take a look at Section 4.5 of the Visualization API terms -- it will be similar to that.

You'll see that an exception to the deprecation policy will be features marked "experimental." This label is for experimental features that the deprecation policy does not apply to and therefore they can be changed or removed in the future, even if the deprecation policy applies to the rest of the API. You may have seen in the AJAX Search API reference that we have a few such features already, so we wanted to make sure you knew which ones those were.

The current experimental features include all of Book Search and the "image type" restriction of Image Search. We've done our best to clearly mark all of these as experimental in the docs.

As always, please let us know if you have any questions or comments.

Google Code Labs and the SOAP Search API

2009-03-03T10:59:00.000-08:00

As recently announced, a new program was introduced today for Google Code Labs. We're proud that the AJAX Search API has already graduated from Labs, which demonstrates our long-term commitment to it.

Also part of that announcement was that the SOAP Search API will be retired on August 31st, 2009. It was deprecated in 2006, when we stopped accepting new developers for the API. Since then, it's been steadily declining in usage and we believe the majority of use cases are sufficiently handled by the more comprehensive AJAX Search API.

In many ways, this AJAX API is a superset of the SOAP API, providing access to local, news, image, and video search results, among others, in addition to web search. Therefore, we encourage SOAP developers to explore our documentation and consider migrating their applications.

Please keep in mind that the AJAX APIs exist for the benefit of end-users; several of their features and usage guidelines are designed with them in mind. For instance, each search performed with the API must be the direct result of a user action. Automated searching is strictly prohibited, as is permanently storing any search results. Please refer to the Terms of Use for more detail.

And for developers new to the AJAX Search API, don't forget to check out our discussion group, a good resource if you have questions or need more help. Welcome aboard!

jQuery, YUI updates

2009-02-20T11:14:00.000-08:00

We have updated versions of jQuery and YUI on our CDN. jQuery is now at version 1.3.2 which will be what version 1 and 1.3 aliases point to.

YUI's new version, 2.7.0, includes a new stylesheet utility to do dynamic CSS without looping through DOM nodes as well as some enhancements to existing functionality such as charts, DOM collection, and tree view. Furthermore, YUI is maintaining their image as a library for professionals by beginning to add IE8 support in preparation for Microsoft's upcoming launch.

I'd also like to remind you that all public updates to our APIs can be followed on our Google AJAX API Alerts blog. That blog is meant for minor API additions/updates/fixes, and in the future these alerts will only be posted there.

Adding Google News to Your Website

2009-02-03T09:47:00.000-08:00

Today we are launching a new extension to the AJAX Search API, a Google News-based element. This element embeds a news slideshow on your site, letting your users see headlines and previews from Google News based on queries that you've selected. Here is an example of the NewsShow in action:

It couldn't be easier to add this to your site. Simply include this iframe:


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

The element comes in two standard sizes: 728x90 and 300x250.

Adding a NewsShow to your site in this way allows you to customize its shape and content with URL arguments. Simply input your parameters into our wizard and we'll build the code for you. Or, for greater control over the NewsShow's look and feel, you can call the classes directly. Check out the documentation for details and the Code Playground to try your hand at customizing.

As always, let us know what you think in the Google AJAX API developer forum.

Note: Earlier this evening a reader pointed out a typo in the iframe snippet which has since been corrected.

Playgrounds and alerts

2009-01-22T10:01:00.000-08:00

I recently launched a new product to help developers learn our APIs. It's an open source framework for showing Javascript code samples. The tool allows users to click through samples so that they can edit code and see their changes live. In order to be a more practical tool for code editing, I put "save" and "export" features in there. You can read more about it on the official blog post.

I would also like to point you at a new blog the AJAX APIs team will be maintaining: the AJAX APIs Alert Blog. Whether you know it or not (or believe it or not!) we are constantly making changes to the APIs. New features, bug fixes, tweaks, etc. In the past we haven't had a way of communicating these changes to you since they can be small changes and not worth a whole blog post here. Furthermore, there are those of you that want to know when we update the Javascript libraries that we host. So from here on out, that blog will be the new home for these "alerts". Posts will be short, to the point and we will try to update it with all public changes, so subscribe now!

Welcome YUI!, script.aculo.us gets fresh

2008-11-21T09:32:00.000-08:00

We've been hosting most of the big powerhouse Javascript libraries and so far it's been a huge success. However, without YUI!, our collection has been incomplete. Well, I'm not saying that now we're complete and won't add more libraries, just that we're less incomplete than we were... you know what I mean.

Anyways, after getting legal approval (people actually read those licenses), we pushed it live. We are equally as excited about this as Yahoo! and the Javascript community.
So let's take a look at how you use it:

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

That code will load the YUI loader which then loads the button and calendar widgets (combined as one script) and calls onSuccess when they are loaded. If lazy loading scripts isn't your thing, then you can use the dependency configurator to configure the perfect script URL. In my case, to achieve the same results as above, I would use:

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

Also, we've updated script.aculo.us to the new minor release version 1.8.2. For those of you who are using our aliases, you've already been updated!

As always, stop by in our group or IRC channel to give us a piece of your mind.

Local Search results now include China

2008-11-13T14:58:00.000-08:00

We're pleased to announce the addition of local search for China. For users already using the AJAX Search API for local search, you should now be able to search for businesses in China without having to make any changes. Try typing "hotels in Beijing" in your site or app which uses the Google AJAX Search API. You should see some results:

To take advantage of local search functionality, take a look at the AJAX Search API. The samples here are also particularly useful.

If you have any feedback or comments, please drop by our Google Group or new IRC channel (irc details can be found at the bottom of this post).

SWFObject Library Added to Libraries API

2008-11-10T19:02:00.000-08:00

If you're a Flash nut then you probably know about the SWFObject Javascript library. I'm not, so I didn't. However, since I promised myself I would play with Flex soon I am very happy that a "Flasher" suggested that we add it to our AJAX Libraries API. I took a look at it and found out that it's a great little must-have library!

See, embedding a Flash video on a page is actually more complicated than it should be. You can't just throw a tag on the page with some attributes and expect it to work. In fact, to embed a Flash file there are different methods for different browsers such as using an <embed> vs. <object> as well as setting the parameters for the file.

The SWFObject library simplifies the process so that all you need to worry about is including their Javascript library and using a single method to embed your Flash on the page in a safe, cross-browser manner. It also has a few extra utility functions, such as setting a load event for the Flash object and detecting the user's Flash version.

Because this library is open source, extremely popular, and so handy, we have added it to our AJAX Libraries API so that our caching benefits can be reaped. If you want to express your extreme happiness then you can do so in our new IRC channel:
server: irc.freenode.net
channel: #googleajaxapis
http://www.mibbit.com/?server=irc.freenode.net&channel=%23googleajaxapis

Styling the SearchControl Guest Post

2008-11-03T10:36:00.001-08:00

So, the other day, I was asked by the AJAX APIs dev team if I'd like to write a guest blog post, but they didn't tell me what to write about. I thought about telling you how the AJAX APIs revolutionized how I think about life, design websites, and slice bread, but then I realized that I buy my bread pre-sliced. So I started going back through the group looking for common questions or themes to threads, and I realized that a huge portion of the questions asked can be summed up like this: "How do I style the google.search.SearchControl?" For instance, how would one make it so that only a result's title and URL appear (i.e., the description is not visible), or even just the URL? What if you want to change some of the default colors? What if you, being the stylish computer geek that you are, want to make your SearchControl into a 24th century Starfleet console to fit in with that first-season spandex Star Trek: The Next Generation uniform you're wearing right now?

Well, you're in luck! Using Mozilla Firefox with the Firebug add-on installed (an absolute must-have for any web developer, by the way), you can do all this and more simply by inspecting the structure of the default search control and taking advantage of the fact that almost every one of its individual elements is given at least one className that can be used with Cascading Style Sheets to apply different style rules. We've put together a spectacular video to provide a very brief overview of using Firefox and Firebug to inspect the structure (and tinker with) the structure of the control.

For even more information on how you can do more with Firefox and Firebug, you'll want to check out Ben Lisbakken's excellent tutorial, which includes even more video! And for good measure, we've included the control's structure (complete with a few of my own comments) below:

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

So, thanks to Firefox and Firebug, we have access to the SearchControl's structure. Now we can get to work making our control look like one of those 24th-century consoles that we see every day on the starship Enterprise! To get this done, we're going to start with the stock "Hello, world" example for the AJAX Search API. Then we're going to remove the style element that comes with it and plug in a new external stylesheet below the inline script that initializes the whole thing.

Once that's done, we need to (a) change a bunch of colors; (b) rework a number of background images; and (c) open a small hole in the space-time continuum to get ourselves a starship console to put it all on. Okay, so that last one isn't exactly possible, but we can do all the rest with a little CSS. And the whole thing, put together, looks like this.

Now, you will notice that a number of those rules have complex selectors (e.g., .gsc-resultsHeader td.gsc-twiddle-opened...). This is because Google's default CSS is rather specific in places. And it's also why Firefox with Firebug is so very important. It really makes the whole process almost painless.

So there you have it: style. Well, for your SearchControl, at least. Next time, we'll talk about why the Starfleet quartermaster abandoned spandex.

Until then, happy styling!

Jeremy R. Geerdes
Generally Cool Guy
jrgeerdes@gmail.com

p.s. What cool custom designs have you come up with? Share them in the Google Group! Ben Lisbakken has promised some Google schwag for interesting designs...

MooTools 1.2.1

2008-10-29T19:09:00.000-07:00

MooTools v1.2.1 recently got released and we have received the thumbs up from the maintainers to host it, so the bits have been flipped and the pipes are ready to MOOve it over to you guys.

But wait!! Before you get started with 1.2.1, please note that the previous version we are hosting (1.11) and the new version (1.2.1) are incompatible. So as not to break anyone out of the blue (and put them in a bad MOOd) we have frozen the version "1" alias to 1.11. Here's what the aliases look like for MooTools:
google.load('mootools', '1') // gives you version 1.11
google.load('mootools', '1.11') // gives you version 1.11
google.load('mootools', '1.2.1') // gives you version 1.2.1
... you get the picture.

If you have some extra time, stop by the group and show us what you've been up to with MooTools. Happy grazing!

New Languages for Translate and POST Interface

2008-10-07T10:37:00.000-07:00

We are pleased to announce two enhancements to our AJAX Language API.

Thanks to the great efforts of the Google Translate team, the API is now able to support 11 additional languages for translation:

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

Also, we'd like to introduce the new POST interface. Among other things, this can be used to send longer URLs by implementing a JavaScript bridge to, for example, Flash or Java using the RESTful interface. For additional information, take a look around our Google Group.

If you have not already done so, please take a moment to familiarize yourself with the AJAX Language API terms .

Clarifying our TOS to allow additional uses

2008-09-15T16:58:00.000-07:00

As the AJAX APIs have undergone tremendous growth and adoption, developers have used these APIs in many new and exciting ways. When things move fast, sometimes details get left behind, and our Terms of Service has not been keeping up with the rapid rate of change. We want to make it clear that you can use these APIs in the context of websites, gadgets, mobile apps, desktop client apps, etc. In response to your feedback, we've dusted off and updated the AJAX Search API terms and the AJAX Language API terms. The primary change was replacing "website" with "Property" that's defined as a "website, application, or other product".

As always, thank you for the feedback. Keep your comments and suggestions coming! We look forward to all of your amazing creations using the Google AJAX APIs.