The Google Geo team wanted to celebrate the landmark achievement of one million Maps API integrations and to demonstrate the immersive possibilities with Maps in the browser. They partnered with us to create both an installation for Google I/O 2013 in San Francisco and a video announcement (learn more about the video here).
Our concept for the installation is "Map Dive," a game that lets users free fall to famous monuments around the globe. The goal of the game is to navigate Pegman (the Streetview icon) through a series of gates, collect stars, hit bonus objects and land successfully.
To immerse users in Maps, we used a panoramic Liquid Galaxy system (seven 60" screens in portrait mode) that displays live Maps tiles across seven instances of Google Chrome, synched via WebSockets. The user stands in the center of the displays to play, and an Asus Xtion Pro picks up their moves with its 3D depth-sensing camera.
We kept the Map Dive user interface minimal to focus on the styled Maps and to reflect the new Google Maps design that was unveiled at I/O.
As the hero of the experience, Pegman got some special love from our designers, including responsive facial features like "happy," "smug" and "abject terror" to go with his custom helmet and harness.
ANATOMY OF PEGMAN
In order to showcase a variety of map styles, we designed a suite of base maps to correspond to the course climates, experimenting with more extravagant styles that were triggered by hitting "bonus" floating objects along each course.
At an early stage in the project, we did a motion study for what Pegman's map dive might look like and, at the same time, we built a prototype using 3D CSS transforms for the ground plane. Here you can see the final proof of concept that includes a 3D CSS cloud layer, and 3D objects in WebGL.
"One of the most interesting product demos on display at Google I/O this year..."
PROOF OF CONCEPT
Many of the concepts we prototyped couldn't have come to life without custom tools to help visualize and iterate. Our development team took an active part in this stage to build 6 tools, including a course-creation tool using the Maps API, a motion capture tool for the Asus Xtion Pro built in openNI with C++, and a tween tool to create Pegman's special aerial moves. Here are more details on the APIs and technologies that drive the experience.
"Map Diving was a universal hit, delighting both attendees and the engineering team behind the Maps API."
Monica Tran, Product Marketing Manager, Google
After months of work, we unveiled Map Dive at I/O 2013 to lines of eager map-divers. The installation garnered incredible responses from both attendees and the press. Geek.com called it "A terrific example of the capabilities found within the new Google Maps" and SlashGear praised the interface and remarked "Think of the possibilities!" Most of all, we were able to highlight the potential of one of the web's best APIs.
The Map Dive installation allowed us to concept and create building blocks to help push us on future implementations. We're dreaming of sound effects, multiplayer mode, a tablet version and even an Arduino-controlled fan to simulate wind speed, based on how fast Pegman is falling, as the fan blows on a player's face. We have open sourced all the code, so others can iterate and continue to dream with us.
Not everyone can have a 7-screen immersive set-up at home, though, so we brought the joy of skydiving to your couch by making Map Dive as a single-browser Chrome Experiment. Check it out here to experience the exhilaration of a free fall, no parachute required.
unique map textures
Kate Wolf, Amie Pascal, Davis Priestley, Jonathan Runyan >
JD Hooge, Martin Linde, Matt Sundstrom, Dan Schechter, Sage Brown >
Phong Ho, Ben Purdy, Sebastien Chevrel, Paul Farning, Thomas Reynolds >
Tim Kviz >
- - Interaction Design
- - Art Direction
- - Motion Design
- - Development