Introducing the Virtual Keyboard API

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

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

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

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

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

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

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

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

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

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!