New Google Maps Shows Future Of Web GraphicsNew Google Maps Shows Future Of Web Graphics

Office 365 Vs. Google Apps: Top 10 Enterprise Concerns

Google provided a sneak peak into the future of Google Maps, in the process showcasing the future of plug-in-free 3-D graphics for the Web.

Brian McClendon, engineering director for Google's geospacial products, showed off Google Maps GL last week as part of a keynote presentation at Web 2.0 Expo, a UBM TechWeb/O'Reilly Media event in New York. He noted that the product indirectly takes advantage of technologies created by his former employer Silicon Graphics (once the ultimate computer graphics powerhouse), which were standardized as OpenGL. Google Maps GL takes advantage of WebGL, a variant implemented in Google Chrome and in the latest beta versions of Firefox, which allows those browsers to display 3-D graphics without the need for plug-ins.

While Google Maps GL shares all the familiar functions of Google Maps, "we've completely replaced the engine that draws the maps," McClendon said.

In part, this was Google showcasing the new possibilities for standards-based rich Web applications, using HTML 5 as well as WebGL, both of which were also the subject of tutorials at the conference. When Web developers talk about HTML 5 today, they are typically referring to not only the latest hypertext markup language specification, which includes tags for displaying multimedia content natively within a browser, but also the combination of HTML with cascading style sheets (CSS) 3 and the latest JavaScript techniques for programming the behavior of Web documents.

[Even as Google adds new features and products, it eliminates dead weight. Find out more: Google Kills Buzz In Friday Product Purge.]

WebGL adds a language for programming 3-D graphics and animations, with direct access to your computer's graphics card. When you enable Google Maps GL, Google runs a test first to see if your graphics card is up to snuff--I received a warning when I tried it on my laptop, but it worked anyway.

With WebGL enabled, Google Maps can dispense with the hack of displaying maps as tiled JPGs animated with Ajax JavaScript techniques. Instead, it just sends your browser the instructions to display graphics polygons. This results in smooth 3-D graphics, including the ability to pan, tilt, and zoom your way through satellite or streetview photos. These views are particularly rich for certain showcase locations --the onstage demo at Web 2.0 Expo included an interactive tour of the Piazza del Colosseo (a.k.a. the Colosseum) in Rome.

You can opt into enabling Google Maps GL at maps.google.com/gl/. (Look for the "Do you want to try something new?" link.) WebGL has also been used to create some beautiful multimedia experiences, such as Lights and 3 Dreams of Black.

HTML 5 is a little more mainstream, supported to an increasing degree by the major browsers, although some effects still require browser-specific tweaks. Google developer advocate Pete LePage gave a tutorial built around a Web jukebox for sharing music, with audio player and animation effects, and drag-and-drop file uploads and downloads. Those effects are typically implemented using a plug-in such as Adobe Flash, but HTML 5 makes them possible using only Web native APIs.

For example, the animation of his dancing avatar was achieved with CSS3 transforms to alter the height, width, and skew dimensions of the image, with the speed of the transitions also specified in CSS. The demo triggered the transition by using JavaScript to add, remove, or toggle on and off class properties of an object on the page, such as the avatar image. Although it's possible to achieve similar effects using a JavaScript library such as jQuery, "we kind of wanted to avoid using jQuery as well," LePage said.

Still, it's true that some of these techniques are bleeding edge enough that the CSS selectors and JavaScript commands haven't been fully standardized. In CSS, you sometimes have to add a prefix for each browser you are targeting and "write five lines of code to do the same thing," he said.

For example, it's now possible to specify image gradients in CSS code rather than adding gradients as background images, but browsers do handle this slightly differently. He recommended the Colorzilla Gradient Editor as a tool to help you get the code right.

Also, although HTML 5 includes an audio object, the music player demo took advantage of a more elaborate audio API in Chrome that makes it possible to exert finer control over the audio using JavaScript. Firefox has a slightly different audio API, and when this feature is standardized, LePage said, "my guess is it will take the best of both and also wind up being different from both."

Other techniques such as showing and hiding panels are more established and clearcut. Even when using techniques that are borderline, you can often work around the gaps using browser polyfills, or ways of detecting the capabilities of the user's browser and filling in with other techniques such as jQuery or a plug-in when necessary.

For more information, LePage recommended HTML5 Rocks and HTML5 Boilerplate. Most of all, he urged the audience to be inspired and create great things "because everything else follows from that."

Learn about the latest cloud technologies and platforms from industry leaders and thinkers at Cloud Connect Santa Clara. In Santa Clara, Calif., Feb. 13-16. Sign up now.