Google I/O 2009 – Advanced 3D Geo Apps for Web: Earth API

Google I/O 2009 – Advanced 3D Geo Apps for Web: Earth API

So my name is Roman Nurik. I’m a Developer
Programs Engineer for the Google Earth API
and KML. So what that means
is I help developers– third-party developers
such as yourselves– use our geodeveloper products, such as the Earth API,
KML, Maps, et cetera. And I help you use it
by kind of creating samples, demos, updating
the reference once in a while, taking feature requests,
bugs, things like that. So I kind of triage
a lot of that and I communicate that
back to the software engineers that work on the product
and we kind– I’m kind of your liaison
to the software engineers. So I like to think of myself
in that way. So one thing I wanted to say
also before I start is there’s a URL
that you can go to– that if you have any questions
during the talk, you can, you know,
write them down there, and at the very end
of the talk we’ll go through and try
to answer all those questions. All right.
So… Oh, another thing,
again, before I start is I’m going to be talking a lot
and doing a lot of demos. If you guys want to follow along
on your own computers then go ahead
to this URL:
earthapi-io2009-links And for those of you
on YouTube, hello. Or wherever
the camera is. I’ll keep this link up
for as long as possible as long as tinyurl
doesn’t decide to delete it. So…happy first birthday,
Earth API. Let’s get
a round of applause. [applause] So last year
at Google I/O in 2008, Paul Rademacher,
our tech lead– who’s sitting
in the front row– introduced
the Google Earth API, and I’ll talk a little bit
about what the Earth API is. And we’ve had a lot of,
well, a lot of success. And a lot of people, a lot
of third-party developers have started using this API. And as you can see,
it’s a 3D environment. Right? And it’s right
in your browser. It’s great. And that–that is a birthday
cake, so happy birthday. That’s just
my quick shout-out. What are we going to be
talking about today? We’re going to do
a quick refresher. What is the Earth API? What is
the Google Earth Plugin? After that, we’ll go into
a new demo application that I want to show
to you today called “My Earth.” And we’re going to talk about
some new utility libraries that I’m releasing today, and how those are used
by My Earth to make it so cool. Then we’re going to talk
about some animation, effects,
and user interaction– how that, again,
plays into My Earth and the new
utility libraries. And then we’ll talk about
some really interesting other recent developments. And these are really,
really important for Maps API developers. So if you’re
a Maps API developer that’s been using
the Maps API and also the,
like, the Earth Plugin, by using the–
what’s it called? The Map type,
the Earth Map type. Then you want to stick around
for that definitely ’cause we have
some good news for you. After that we’ll take Q&A
from Moderator and from the mics
in front. So quick refresher– I’m assuming that all of you kind of know
what the Earth API is. But just in case, for the one or two people
that don’t know, let’s go through what the Earth
API and the Earth Plugin are. So better than talking about it
is showing a real demo. So this is Google Chrome, and we now support
Google Chrome. When we launched,
Google Chrome wasn’t around, but we now support
Google Chrome. And this is
the Google Earth Plugin. Well, it’s currently loading,
but when it loads, it’ll be…
one second. [chuckles] Ah, the Internet.
[laughs] Well, luckily I have
another version here. So here’s Google Earth– the full power
of Google Earth, right? In your web browser. So there’s no left panel
that has, like, your “my places” and such, and there’s no layers. But there are, you know, the core fundamentals
of Google Earth– that is, the rendering system, all the imagery–
all the vast imagery, the 3D buildings
and everything– is available
in your web browser. Right? So–and then you can
access that with JavaScript. You can make your own
mash-up on top of that. So that’s the quick,
you know, Hello Earth demo. So the Google Earth API
is a JavaScript API that allows developers
to create their own mash-ups that use Google Earth and do it all
on the web. The Google Earth Plugin
is kind of the consumer, the end user
side of this equation. And it takes–
it’s a browser plugin that takes
the power of Google Earth and brings it
into the web so that users can interact
with your application as if they were
in Google Earth but looking
at your content and whatever
you want to show them. So here’s a quick
kind of system diagram of how this whole
equation works, right? You have your own
web application, your own client-side
JavaScript on the left. That interacts with the Google
Earth API in JavaScript, and then the Google Earth API takes care of dealing
with all the kind of… inner, you know,
plugin-related stuff with the Google Earth Plugin. So those–so you never really
directly deal with the plugin. You only really deal
with the JavaScript API. So everything you do
is JavaScript– and a little bit of HTML,
a sprinkle of HTML. So I just want to talk
about some of the things that we’ve accomplished
over the past– the past year
that we’ve been around. We’ve launched Mac support
back in December. So when we first–
[applause] round of applause for
the Mac users, yeah, yeah. We’ve launched–
so we’ve launched Mac support. We originally only launched
with Windows support, so now we support the Mac,
Safari and Firefox. We also now support
KML Tour playback. Now, let me talk about
that for a second. For those of you
who don’t know what that is KML Tours were launched
with Google Earth 5 back in February. And they allow–they allow
KML content authors to create a beautiful,
movie-like experience right in Google Earth and
now in the Google Earth Plugin. So if you have some… some narration that you
want to kind of put together that kind of explains
your KML content, and you want to do it
in a dynamic, interactive,
kind of animated way, KML Tours
are the way to go. We’ve also launched support
for underwater terrain AKA ocean,
as many people have called it. Mars mode, so you can–
instead of loading Earth, you can load Mars. And Enterprise
server connectivity– so those of you who have–
who have worked with our Enterprise sales folks to get an Enterprise server, you can now use
the Google Earth Plugin to connect
to your Enterprise server. And the demo gallery has grown to over
80 samples and demos, so you’ve got a lot of good
resources out there, you know,
to get started. So that’s–
that’s the old. I wanted to spend
as little time as possible on the old. Let’s talk about the new. So previously
we’ve only really seen basic forms
of interaction, basic visualizations. But there hasn’t been,
really, a killer– a killer
3D interactive environment where the user feels
like they’re in control and they can, like, modify,
you know, the planet. Right? So this is–what I want
to present to you today is kind of a new paradigm, a new type of application
for the Google Earth API. And that’s going to be
called “My Earth.” This is kind of manifested
in this one demo called “My Earth.” And I’ll do
a quick demo of it, and then I’ll explain
what it is, how it works,
et cetera, et cetera. So My Earth…
when it loads. So My Earth
is a 3D My Maps client that uses
the Google Earth API. It’s a mash-up between
the Google Earth API and the Google Maps
Data API was– which was launched
only a few weeks ago. So I’m going
to go ahead and log in. I’m not Peter.
I’m going to sign out as Peter. So I’m going to go ahead
and sign in. That’s not it.
[chuckles] One second. So it’s going to ask me
to log in once more. Yes. Yes.
Sign in. So I’m going to grant access
to access my Google My Maps. And once the Earth loads, you’ll see a list of–
a list of My Maps. I only opened up
Maps at on the side just so I could
show you 2D versus 3D. So here’s–
here’s an example map, the example map
I’m going to use right now. It’s pretty much a polygon, a polyline,
and two placemarks. So here’s My Earth.
So I have the same thing. So I’m going to go ahead
and click on “sandbox”. And here’s the same content,
but in 3D. All right? So this
is cool and all, right? So I can, you know,
click on stuff, and–oh, it’s a volcano. Great, “The Fishes.” No, that one doesn’t have
a description. “Cordoning off the area,”
blah, blah, blah. So, you know,
it’s very simple. It’s just polygons
and basic features in Earth. But the kicker–
the kicker is now allowing users
to interact with that content. So if I go in
and press this “Edit” button, I’m going to see some cool stuff
start appearing. First I’m going to see
this geometry toolbox at the top,
just like as– just like My Maps has– which allows you
to create placemarks. Right?
And draw line strings. And if I zoom out
a little bit, you could see that I can
keep dragging this around however I want. I can even customize it. Now, this is kind of overkill,
I mean, for a demo, but anyway. “Hello,”
and you can see it change– it should change
in the left side there. “Blah.”
Right. Great. And then I could even
create polygons… and it’s much the same way. And if you notice, if you’ll notice,
once I’ve created a polygon, I can then edit
the polygon. And much like
with My Maps, I can actually, you know,
create new vertices right on the fly,
right there in there. And I could delete
vertices if I want. And et cetera, et cetera.
You get the picture. So I’m going to go ahead
and press “Save,” or actually,
I’m going to press “Done”. And it’s going
to save all that. And I’m going
to refresh Google Maps. And…
drumroll, please. There’s all my new content. So 2D and 3D married,
right? [applause]
Thank you. So there are a few things
that are kind of new about this demo. And this talk, a lot of–
a large part of this talk is going to be talking
about these new things and kind of how you can bring
a part of this into your own applications. All right, so that was–
that was My Earth. What does it do?
So you just saw. It allows you
to edit your My Maps data in the–
in a 3D environment. So this is great for, like,
when there’s mountainous areas and Maps maybe quite doesn’t–
doesn’t quite cut it but Earth is kind of
a better experience for users to work in. So this is–this is
kind of what it does. It allows you to work in 3D,
basic creation, reading, updating,
and deletion of features, drag and drop placemarks, edit polygon, vertices,
and, you know, screwing around with colors,
fill colors… sorry, styles,
et cetera, et cetera. How does it work? A lot–a lot
of the back end stuff is handled by
the Google Maps Data API. But all the front end stuff is powered by
the Google Earth API and some new open source
utility libraries that we’re releasing today. And those open source
utility libraries allow you to do,
very easily, animation and effects,
creation of placemarks, creation of all sorts
of DOM objects very easily,
very concisely. And it also lets you–
lets you do feature editing as you saw with line string
and polygon editing. It also–it also
works by creating those controls that you saw
at the very top. Let me just go back
a few slides. These controls up here. These are actually
fake screen overlays that, you know,
that you can, you know, listen to event handlers
on the window to kind of guess
at interaction with them. And that’s–we’ll talk about
that a little more in a second. It also uses jQuery for a lot of the front end
HTML stuff– specifically,
the left-hand panel. So the open source
utility libraries. There’s two libraries
that we’re releasing today. The–I’m going to talk
mostly about the second one. Let me just talk a little bit
about geojs, which is the first one. Geojs allows you to do–
allows you to work with 3D geometries
in JavaScript. So you can work with
points, lines, and polygons. You could do math on them– like get the distance
between two points, calculate
the initial bearing to get from point “A”
to point “B”, calculate if a point
is in a polygon or not, calculate the area
of a polygon. You could also work
with things like latitude/longitude bounds. A lot of this is actually
repeated from the Maps API but this is kind of
open-sourced. It’s not–it’s not
the same code as the map is, as the Maps API stuff. But it accomplishes
much of the same goals. So that’s geojs, in a–
in a split second. The earth-api-utility-library
or GEarthExtensions is kind of
what you just saw. A lot of the editing
and, you know, animation and effects stuff–
that’s handled by that. So it allows you
to create KML objects in a very JSONic way. So if you’re
a JavaScript developer and not really
a KML developer, and you want to use
the Earth API, this–this utility library
may be for you. You can–it also takes the pain
out of common operations such as walking the DOM– and I’ll explain that
in a second– walking the DOM
and, like, getting features by the–
clearing features. A lot of–
a lot of developers have requested these things
from the Earth API, and we haven’t
implemented them. But we now have a space where we can implement
these common things in an open source way. It also has a very complex
animation and effects framework, and again,
one-liner draggable placemarks and editable line strings
and polygons. And all this stuff is
open source under Apache 2.0, so feel free to take it, screw around with it,
do what you will. It’s pretty much, you know, as long as you
abide by that license, it’s your code. So how do you use
GEarthExtensions? I skipped all the kind of
boilerplate Google Earth API stuff, just so that I could focus
on utility library stuff. So all you do is you
include a script tag that points to
the GEarthExtension’s… distribution JS file. Then, inside of your
success callback for createinstance, after you get an instance
of the GE plugin interface, all you need to do
is just create a new instance of GEarthExtensions, and you have all of that power
and capability ready for you right there. So let’s talk about
one use case– creating a placemark. It’s a very simple
use case, but the old kind of–
in the Earth API, it takes a lot of code,
and let me explain why. The earth API
is modeled very much– very much after KML. So in KML,
to create a placemark, you have a placemark
and then inside of that you have a style
and then an icon style and then an icon
with an href that points to some icon
or some image file. And then you have a point
with coordinates set to the latitude
and longitude of the location
of the placemark. You also have name
and description, this and that. So if you look
at the code, the Earth API,
you pretty much– in the Earth API,
you pretty much build a KML DOM. So you create that icon,
you create that style, you get that icon style
and you set the icon. And this stuff is kind of you know,
not really KML-related. But then you do stuff
like setNames, setDescription,
and setGeometry. So it’s modeled after KML. So if you know KML,
then some of these things will make a lot of sense
to you. So that’s the–that’s
the Earth API way of doing it. The GEarthExtensions
way of doing it is much simpler and shorter. So to create
a placemark, you call gex. And remember,
gex is that instance of GEarthExtensions. You call
gex.dom.addPointPlacemark. You give it
a point-like object so you can give it
a look at a point, you can give it an array
with a latitude and longitude– pretty much anything
that may resemble a point you can throw at it. So you give it that. You give it a name description
and a stock icon. You can even just use icon
and give it a full URL. But this is much shorter,
right? This is much more
JSONic, or– I don’t even know
if that’s a word. It’s much more like JSON
as opposed to KML. So it really
helps for people that don’t know KML
that well. It really helps
to kind of use this and start off
with a much simpler kind of piece of code. Let’s talk about
something else. So I was talking about
walking the DOM, right? So walking the DOM is… it’s an important–it’s
important for various reasons. Let me give you kind of
a use case. Let’s say you’re trying
to play a tour in the Google Earth API. The way you do that
is you first use something called Fetch KML to load a KML file
that has a tour inside of it. You then have to find
the actual tour object within that loaded KML. So the way to do that is you would have to walk
through each document folder– each–maybe, like,
look through all the features looking for a tour and then passing that
to the tour player. So in order to kind of
make that easier, I created a function
called gex.dom.walk, which all it does
is it takes a function– Where’s the cursor?
There it is. So it takes a function
and then it calls that function for every object
in the DOM. And as soon as–
and like for– this example
is a little simpler. It’s just trying to find
the feature with the given I.D. As soon as you find– as soon as this function
gets called with the feature with the given I.D.–
or in the tour case, as soon as the function
gets called with the feature
of the KML tour type– then you can kind of
end the walk and say you’re done. So this is–gex.dom.walk
is effectively a depth-first search
into the KML DOM tree. So previously,
a lot of things that required
that type of algorithm were–were kind of painful. And this aims to make it
a lot easier. So that’s that. Let’s talk about
some of the cool stuff– animation, effects,
and user interaction as you just saw in My Earth. So the first thing
I want to show is– the first thing I want
to talk about is draggable placemarks. That was kind of the very
simplest thing in the demo. Go ahead and close this.
Close that. All right, so… here’s the code
for a draggable placemark. It’s actually
much simpler than this. I kind of overcomplicated this
a little bit. It’s really just that. But anyway, so if I go ahead
and run this code, creates a placemark,
can drag it around, right? Even shows a target–that’s
a screen overlay over there. Shows a place–
like, the point at which that point will land. And then if I let go,
it bounces it. So the dragging
is kind of simple. The dragging is,
you know, it’s just a bunch
of mouse events. But the bounce is actually
pretty complex on the–I mean,
to actually use bounce is very simple. But the actual things that go–
that go behind the scenes to make bounce work
are pretty interesting. I’m gonna talk about that. So actually,
before I do that, here’s the code for
making something draggable. I’m just going to give it
a dropCallback, so when I’m done,
when the drop is complete, I’m going to do an alert. The dragging style is,
again, a JSON-like object, and again, this is going
to be a theme throughout– that everything
is JSON-like. It’s a JSON-like object that kind of shows–
that kind of tells the style that the placemark
should take on while it’s being dragged. Then there’s also
a target screen overlay so this–this screen overlay
right here you can describe
in this way. And all this stuff
is kind of corrupt. You don’t–
you don’t really need that. The most important thing
is just that icon. So as you can see,
it’s pretty simple, and this whole thing here
is optional. So you could’ve–you could’ve
completely omitted about 99% of this code and just said,
“gex.edit.makeDraggable,” and give it a placemark,
and you’re done. So let’s talk about bounce. Like I said,
bounce is pretty interesting, so I want to talk about it
in detail. Bounce works behind the
animation and effects framework in GEarthExtensions, which is grouped under
the “fx” name space as you see at the top. So when you call bounce
on a placemark, what that really is– it’s just
a property animation on that placemark’s
point’s altitude. So I’m just saying, you know,
when I say “bounce,” pretty much
this animateProperty will take the placemark,
take its point, and just create kind of a property animation
on its altitude with some extra code. And let’s talk about
animateProperty a little more, because that’s–
that’s pretty interesting. So this is what
animateProperty looks like. So I’m gonna–so this is
actually not bounce, this is something else. I want you guys to take
a quick ten seconds to look at this
and try to figure out what it would do. And then I’ll explain
what it does. Actually, if anybody
has any ideas, then you can raise your hand, and come up
to the speaker… No? All right.
Okay. So…so what this does is it takes this placemark and it animates
its point’s latitude. So it takes this latitude, increases it
over a course of– over the course
of 250 milliseconds, increases its latitude
by 0.05 degrees of latitude, and this easing: ‘out’
thing just means that it kind of slows down
when it nears its destination. When this–when the first
animateProperty is complete, it calls
a second animateProperty to do the reverse action. And it does
the reverse easing too. So what this looks like– and unfortunately I don’t
have a demo of this, but you could just
copy and paste it. What this looks like
is it takes a point and it slingshots it kind of
0.05 degrees north in latitude and then slingshots it
back when it’s done, and then throws up an alert
saying done. Not a very useful thing
to do in your real application, but just as an example it kind of makes some sense. So that’s animateProperty. Now, animateProperty is based on an even
lower level construct called TimedAnimation. And let me get into
some details about that. So TimedAnimation– you can forget about
some of this first stuff. TimedAnimation
takes a duration– like for example,
in that sample, it’s 5,000 milliseconds
or 5 seconds. Takes a duration
and a–a function, like a render function, and it calls
that render function repeatedly,
as fast as possible, over the course
of that duration. So, like, for 5 seconds,
that function, as you see there, is going
to be called repeatedly. And it passes in
at the time at which the animation
is currently at. So you’ll get things
like 0, 100 milliseconds, 200 milliseconds,
300 milliseconds, and the idea is that you do
whatever animation you want, you do–
you update the scene which–
in whichever way you want based on that time T. So the–this actually
has the effect of creating
a very smooth animation. So as soon
as you can draw the– like, update the scene with
the next frame of the animation, that function
will be called. You’ll–
you’ll make your changes. And it will be propagated
to the view. So that’s TimedAnimation, and there’s an even
lower level construct called Animation, which I’m
not going to talk about. That’s just
an indefinite animation. So let’s change gears
a little bit and talk about
the line string editing– the line string
and polygon editing. To–to edit a line string
or a polygon, that’s all you do. One line of code. So gex.edit.editLineString– you give it either a line string
or a linear ring, a linear ring in the case
of a polygon’s outer boundaries. For those that know KML, a polygon is simply just
kind of like an encapsulation of linear rings. So it works the same way
for line strings and polygons. That’s pretty simple. And here’s what it looks like. So each coordinate is
actually a draggable placemark. So if you remember,
I was talking about draggable placemarks
and how– how it’s really easy
to make them draggable, right? How to make a placemark
draggable–one line of code. So line string editing
just uses placemark draggability,
I guess. And if you–
if you look a little closer, you’ll see that–
that there is– that there’s the–
the main vertices and then that kind of
ghost vertex, the vertex that users
want to click on to create a new vertex. And if you use My Maps, you’ll know that this is
kind of very much in the same–
in the same spirit and it works in much
the same way. So again, I just want
to emphasize that this is all handled
by the utility library. You never have
to deal with, you know, dealing with these middle–
midpoint placemarks. You just say, “Make this
line string editable,” and everything just works. So that’s–that’s a– that’s a big part
of the utility library. What I want to talk about
now is a little different. It’s about these controls. So custom controls
have been a– probably the number one
or number two feature request for the Earth API
in a very long– for a very long time. Unfortunately, it’s–it’s
kind of a hard problem to solve. The thing is, though, there are–there are kind of
workarounds or solutions. And the two solutions
listed up here are kind of–they have
different use cases, so I’ll go through
each of them. So screen overlays– in My Earth,
the controls at the top are screen overlays. So what happens in
the screen overlay scenario is if you want
to make a button on top of the–
on top of Google Earth and on top of the plugin, you create a screen overlay in a certain area of the–
of the window and then you add an event
listener on the window for–well, actually,
you just add an event listener on the window and then
when that–well, no, sorry– a mouse click event listener
on the window. And then when you
get that event, you just look
for the “X” and “Y”s and if they’re
within the range of that screen overlay, if they’re in that rectangle, then you just do
what you need. So you can do mouse over for a–
for, like, a hover state. You can do mouse out
for the normal state. And click for the–
for the actual click handler. So that’s pretty simple to do. It’s–I want to–I want
to say one thing, though, is– that’s not in
the utility library yet, but it will be
probably pretty soon. So, you guys,
if that’s really important, then definitely vote it up
in the feature requests. And one other thing I’ll say
about screen overlays is that since–
since you can– you can have
transparent PNGs, you can actually make it
look really nice, right? You can make it
flow into your– into your overall UI design
very well. So if you see here,
kind of the corners around it, and it’s–
it blends in very well. So that’s–that’s
the screen overlay technique. It has its–
it has its downfalls. For example, you can’t really
do dynamic text inside of it because screen overlays–
you can only use images. And that’s why–
that’s why IFRAME shims can be a better technique. So IFRAME shims. For a more complex UI,
not just buttons, you want to use
the IFRAME shim technique. What that is
is you create your HTML for your controls– so, like, let’s say
you have a text box. So you just have, like,
an input button or a div or something
with an input inside of it. And what you do is you overlay
that on top of the plugin. But the problem is,
in the browser space, plugins naturally always appear
on top of custom controls. So even if you set
the CSS z-index of the control to something
very, very high, it still won’t show
because– because of this native
kind of browser thing that all browsers do. So the way around that is to use something
called an IFRAME shim. So what you do is this: you have the plugin, right? This is the–the div. Imagine this as the div
with the plugin. You create your control
and you set its z-index. You then create
an IFRAME, an empty IFRAME, that’s right in between–
that fits right in between, z-index-wise. So let’s say the z-index
of this is 0. The z-index of your control
can be, like, 2, for example. And then you set the z-index
of this empty IFRAME to 1. And then you take that IFRAME and you set
its coordinates to– to be the exact same
coordinates as the kind of
custom control. What this ha–
the effect of this is to make the browser
kind of be like, “Oh, this area should be
its own window.” And then the IFRAME doesn’t
actually show anything so your HTML shows through it. It’s–it’s a really
messy browser quirk, the way–
the way it works. And hopefully in the future
this won’t be necessary and browsers will be kind of
like a first-class HTML and browser element. But this is kind of
the way it works now. So IFRAME shims are–
are good for several things. They’re good if you have
a really complex UI, like I said. But one problem
with IFRAME shims is that they’re,
first of all, kind of cumbersome
to work with in–in code. They’re also–they also
look cumbersome visually, and they kind of tend
to flicker once in a while. So bottom line,
after all of this, is if you just want to show
some buttons and you want to make them
look good, and that’s all you need,
just buttons, use screen overlays. For anything more complex,
like, for example, text input, or anything else, pretty much,
you want to use IFRAME shims. And one last thing
is that balloons– info windows,
actually, in–in the plugin–
in the Google Earth Plugin uses IFRAME shim technique. So that’s
how you can actually– well, let’s–
let’s do a quick… let me just show you
really quickly. And this doesn’t
have a description. This will be a good time
to show how easy it is to change gex code. So if I just go ahead and set
this description to “hey”. And add a comma… So you’ll see there
if I… if I select here, I’m selecting
everything, right? So here, this is
the IFRAME shim right here. You can’t see it
because it blends in with the–with the balloon
background pretty well. But that’s actually
an IFRAME shim. So there’s an IFRAME
under there if you look at– if you inspect the code,
you’ll see an IFRAME. So that’s–that’s kind of
the same thing that you could do in–
in your code to accomplish this effect. And there’s also a demo
in the demo gallery showing how to use
this technique if–if you all
want to try that. All right, so that’s… that’s pretty much
how My Earth works. And then there’s–
again, there’s a lot of– there’s a lot of back end stuff
with the Maps Data API, the JS client library
for that, and I’d gladly take questions
on that if you’d like. But that’s pretty much it. There is–
there’s nothing else that’s really seriously new besides those kind of
new concepts. So feel free to look up
the code for My Earth. It’s–again,
it’s open-sourced. It’s–it’s not
in the demo gallery yet but I’ll probably put it
up there pretty soon. So…yeah.
Enjoy. So…thanks.
[applause] Thank you. All right, so other
recent developments– and here’s where
Maps API folks will want to play
very close attention. Back in May 2008, we released the Google Earth
API, as you all know, right? We also released,
concurrently, a Maps API
compatibility layer called GSatellite 3D Map. And what that means is that in your existing
Maps API application, you’d be able to,
in one line of code– I mean, that’s our kind of
common theme throughout every–every developer
product we have– with one line of code,
you can add the Earth,
the Google Earth, as a map type for your map. So you’d be able to just… say map.addMapType
GSatellite 3D Map, and when users
click on the Earth, a lot of things
would be synchronized. So, like, it would switch
from Maps to Earth, and you’d see your markers
and polygons transferred automatically. However,
and this is a big caveat, the integration wasn’t as good
as it could have been. There was–kind of the
transition between 2D and 3D wasn’t as seamless
as it could have been. Polygons, ground overlays,
a bun– a whole bunch
of other features simply weren’t
transferred over. They were
pretty much forgotten. And a lot of developers
have struggled to kind of get that
working recently. And–and there have been
a lot of workarounds and it’s just–
there’s no great solution. However, today,
I want to announce that we finally
have a solution and everything works just
whole–whole ton better. So… the left guy is the old– the old kind of version
of GSatellite 3D Map. The guy on the right
is the new version. He’s beefier. And if you look at the bottom,
I have some demos for you. And the first one
is the beefy demo. Actually, first
I’ll show you a video, ’cause the video is pretty–
pretty stunning. And then I’ll show you
the–the live version. Oh. I have to press play,
of course. Oh, okay.
So this is Maps, right? Press “Earth.”
Instant Earth. You didn’t–
did you guys even notice– oh, let me–
let me play that again. 2D…blah, blah,
blah, blah, blah. 2D, panning around. Done.
Earth. So you can’t even tell,
right? And you can also see
the ground overlays and polygons and–are transferred over
as well. And you can do the same thing,
you know, same thing you would
normally do in Earth. And it’s kind of laggy there because of that
Golden Gate Bridge. And when you click back to–
let me play that again. When you click back
to Satellite, it takes the 3D viewport and kind of
seamlessly animates to what–exactly what it
would be in 2D so that users can barely tell they’re–they’re
in 2D and 3D. So let’s see this live. [chuckles] Wow, right, exactly. And I–by the way, shout-out to the engineers
that worked on this. You guys are brilliant.
[applause] So…let’s go ahead and– man: …crossover
from the Map API? Nurik: Yes, same.
It’s the– it’s the same–same–
it’s almost the same tiles. So let’s–let’s look at
this actual demo in progress. I got little beefy man
over there. So this is–
so let me just point out what–what’s on the screen. There is a polyline,
this orange thing. There is a marker. Then there is a marker
with a custom– and that’s not working
for some reason. That’s supposed to be a marker
with a custom event handler, but something is broken. Anyway… So you have a ground overlay. It’s–I couldn’t find
a better image to use, sorry. And a polygon. So screen overlay,
polyline, marker, and pretty much everything
you could think of. The kitchen sink
is in this demo. So if we click on “Earth,” it d–it still does take
a little bit to load the plugin. But when it does load, everything
is transferred over. And if I go ahead
and press “Satellite”… and I can click back
to “Earth” and “Satellite”. And “Earth”.
[audience chuckles] I ca–
I’m telling you. I honestly sometimes
have a hard time figuring out where I am–
like, 2D or 3D? I try to tilt in Maps
and it just doesn’t work. [laughs] So that’s–
that’s one demo. One other thing
I want to point out is that
for KML content authors, you’ve had to use kind of
really crazy hacks to get Maps and Earth
working together. So that’s, again,
no longer the case. With this new version, GGeoXml, which is the–
kind of the Maps API version– way of looking at KML files, is now fully transferred over
between 2D and 3D. And not only are polygons
and polylines transferred, but let’s say you
have a 3D model in your KML, and you load it
using GGeoXml. Although Maps
won’t display it, when you switch to Earth,
that model will appear. So everything
is just fully synchronized. So if a user
decides to see, you know, the full, full,
rich extent of 3D–of your KML, they could just switch
to the Earth tab and it’s–it’s done. So let’s look at a quick demo,
the GGeoXml demo. By the way, these links
are all available on your computers now. And I’ll–I’ll show you
that tinyurl again in a second. So…very basic KML. And it’s going to load
the plugin really quickly. Hopefully quicker…
in the next couple of months. We’ll see.
[laughs] I need to do one of those Lars
song and dances right now. Eh…hello? Let’s try refreshing
the page. So I’m going to go ahead
and load and press “Earth”. Okay, so everything
gets transferred over, right? Same–
same little good stuff. You know, barely
tell the difference. If we load–well,
that’s the Basic KML. Let’s load
a more complex KML in Satellite. This is actually still loading.
It’s pretty complex. So Earth. So you see the–
that screen over there, right? So Satellite. And–oh, actually,
I guess Maps didn’t show that screen overlay;
I wonder why. We’ll have to ping
the Maps team about that. [laughs] But it works, again. And this is GGeoXml. So this is–the code for this
is actually incredibly simple. That’s pretty much it– GGeoXml–
map.addOverlay(GGeoXml) So you–your URL, your
KML URL would go right here. And you’d add this
GGeoXml object. And then you add
that Earth map type, and when users
switch to Earth, they see Earth– 3D KML. And just one last one,
just for the road. This one’s pretty complex,
right? Maps has some–
the Maps API has some kind of complexity
limitations when viewing KML files
in them. So…but Earth doesn’t. So this is kind of
an optimal solution for everyone. So Satellite if you want
or Earth. And again–I can’t get over
that effect, sorry. [laughs] Okay, so that’s–
so that’s that. So now that’s–
that’s available today. All you need to do
is use the version 2.160 of the Maps API or version 2.X. In–maybe
in a few weeks or so, eventually,
all this new code– this new version of
GSatellite 3D Map will be available in the–
in the Maps API, the regular Maps API. So…yeah. Next thing I want
to talk about really quickly before we finish off is embeddable KML. And this, again, we’re done
with the utility library. Now we’re just talking
about other cool stuff. So let’s say you don’t
like working with JavaScript, but you do like KML. But you do have a website. So originally you would
have to use the Earth API, you know,
figure out how to– how to u–
what JavaScript calls to make to load your KML
into the browser. Now, with–
this is actually– a few months ago,
we released this. You can–instead of,
you know, working with JavaScript, you can just use
a Google gadget that takes a KML URL and spits out
some HTML code. You copy that HTML code
into your page, and you’re done. So let’s just show
a quick demo. So this is a demo of… world oil consump–this is
a KML of world oil consumption. I believe it’s a–
it’s a thematic map. It’s still loading.
There it is, right? So it’s a thematic map, and this is, again,
Google Earth in the browser. But there’s zero JavaScript
on this page. It is–
see, there’s no JavaScript. There’s no Script tag. Actually,
there is one Script tag, but this was copy and pasted
from the gadget wizard. So let me show you
what this looks like. If I go to–go ahead
and go to the wizard… All you need to do
on this page– well, this is going
to load the plugin again. All you need to do
on this page is enter a KML URL or a My Maps URL. Let’s see.
I need a KML URL. I’m not very good with–
hold on. What better than Google
to look for KML? Here, that’s fine. I don’t even know
what that is. Hopefully
it’s not something bad. [quietly chuckles] [laughs] Yeah, I–I will not
be held liable. I’m just kidding.
[man speaking indistinctly] Yeah, let me get something
that I know, just in case. [audience laughs] [Nurik laughs] Here…trunk/examples… yeah, hold on, I’ll–
I’ll get it in here. Static…red.kml. Here, I know this one
’cause I made it. My plugin is still loading.
One second. Okay, so let’s–
let’s–I– all I need to do
is paste the KML in here, paste the URL–
there it is. And now it’s
going to preview. This is what
the KML looks like. All right. And I’m going to press
“Get the Code” and that’s it. I just copy this
into my page, and I’m done. I don’t need to worry
about any JavaScript or anything. And–and… this–this is actually,
again, linked to
from that set of links. For–for those on YouTube, let–you know, God forbid
that the thing goes down– it’s And this–this will
get you to this page. So embeddable KML is cool. But as I mentioned before,
what about touring? What about
Google Earth Tours– those movie-like experiences, those movie-like
interactive experiences that–that you can
make in Google Earth 5? Well, you can now play that
in the plugin pretty simply, and again,
without any JavaScript. So you just go
to a different wizard– this is the touring wizard. Give it a KML
that has a tour in it. It’ll automatically
find your tour inside that KML so it can pretty much
be anywhere. And again,
press “Get the Code” and just copy that
and you’re set. So here’s what that
looks like. And I chose
the Jimmy Buffett Hawaii Tour, and a lot
of the engineers here are gonna be
sick of hearing this ’cause we–we do
a lot of testing specifically on this one. But…oh, actually,
you can’t hear the– you can’t hear the voice, but that’s fine. So again, all-interactive, and I can, like,
pan around while everything’s– say I want to look
at that house. Whoa, that’s weird.
[laughs] Yeah. So…and again,
zero lines of JavaScript. So that’s embeddable KML
in a nutshell. So for–for people
that don’t like JavaScript or don’t know JavaScript and just want to have
KML on their page, this is the tool for you. Right. So that’s pretty much
the talk. Before I–
before we take questions, I want to kind of
do a quick shout-out to developer qualification. We have a new program called
the Qualified Developer Program and this is
for Maps API developers, not yet for
Earth API developers. But this is
for Maps API developers. Just go ahead
and visit this URL if you feel like
you’re qualified, if you want to kind–
kind of some Google cred for your skills
in the Maps API. Go ahead to this URL and get yourself qualified. So that’s–that’s the talk, and let’s take questions. And that’s–that the URL
where you find everything. [applause]
Thank you. So we’ll take questions
either at the microphone, and let me go ahead
and open up the… the I/O Moderator page. Any questions? man: The Google–
Google Earth Extensions… the–the walk functions. Nurik:
Right. man: Does it actually
walk through the… the XML or KML… Nurik: Yeah, it does.
man: The structures? Nurik: Say it again.
What was the last thing? man: So… would there be
a performance penalty if it has to walk through
to find something? Nurik: Okay,
so that’s a good point, and I’m glad
you brought that up. So when you do
a Fetch KML, the only thing that
gets put into JavaScript is the root level item. As soon as you do
a KML DOM walk, each of those items
is getting a JavaScript kind of
equivalent object. So there is a pretty large
performance penalty if–if your KML
is very large and if the last thing– and if the actual thing
you’re looking for is at the very end. man: Last placemark.
Nurik: Right, exactly. So there are edge–
there are cases where that can incur a pretty
large performance penalty, and for that reason,
a lot of… a lot of pretty simple things
like getting a feature by I.D.– man: Or maybe support of XPAT,
I don’t know if there’s– Nurik: Right, so, like,
something like XPAT. That, I mean–
those things can be supported
in this utility library, but there–there are other
kind of ways of doing that. For example… a lot of people
have requested this to be natively part
of the Earth API. And that’s–that’s
an ongoing feature request. So it would be a lot faster,
of course, if–if “get feature by I.D.”
or something like that was in the Earth API. And that’s probably something that I’ll work with
the software engineers to–to try to include. But there–
no guarantees, but that’s–that’s a pretty
honest feature request. man: So by I.D. just–
it has… Nurik:
Say it again. man: By I.D. just it has–
it’s a lot faster. Nurik: Right.
Right, exactly. Exactly.
Yeah. man: The My Earth plugin stuff
looks pretty cool. Nurik:
Thanks. man: Is there some plans
to bring that to Firefox on Linux? Nurik:
Firefox on Linux? So support
for the Google Earth– so Google Earth plugin support
on Linux– I can’t really
comment to that effect. Our product manager
is sitting right there so he’ll be able to take
Linux-related questions and– I absolutely knew I was going
to get that question, but– Peter: So I’m the one
who has to answer your questions when I have to not really
give you an answer. So we don’t have anything
to announce right now. Obviously, we’re very
interested in, you know, cross-platform support. But right now we just have
PC and Mac, so… man: But we do support Firefox
on those platforms. Nurik: Yeah, so Firefox
and Mac are supported, but Linux, again,
it’s still questions– up in the air. Any other questions?
Oh, yep. woman: When I last looked
at Google’s sites, it didn’t take IFRAMES. Do your IFRAME shims
go into Google sites and does this go–
go into Google sites, or are there difficulties? Nurik: Right.
So usually, you can just– since it’s a Google gadget
and sites support gadgets, arbitrary gadgets…
woman: Yes. Nurik: There usually is
no problem. Only recently
there’s been a problem with API keys. woman: I think there was
a problem with Maps– yeah, that I came across. Nurik: Right,
so last I checked, that problem was fixed. If it’s not fixed,
then that’s definitely something that
we should look into further. But last I checked,
it was fixed. So what you would do– let me just clarify
for everybody. There is a gadget URL,
right? So if you could do–
if you go to, there’s a gadget URL. It’s actually just
an XML file. If you take that XML file
and give it to sites, like do, I think,
“add gadget by URL,” and give that URL to sites, it should just work. Again, the only reason
it wouldn’t work, to my knowledge, is if there’s still
that API key problem. woman: Right.
Thanks. man: When you were drawing
the polygon on the Google Earth, you were setting
your vertices… Nurik: Mm-hmm. man: Can you get
the latitude and longitude out of the vertices, or are they (x,y) coordinates
based on the map location? Nurik:
So… they’re all latitudes
and longitudes. I’m assuming
you’re referring to, like, the editable line strings
and polygons–right. So…so you give it
a placemark that has a line string. The utility library
will notify you as soon as
there’s any changes to that–to the–
to the vertices. man: Mm-hmm. Nurik: Right now,
it doesn’t tell you which ver-vertex
was modified, so you won’t–like,
you’ll have to kind of… kind of figure it out,
I guess. But that’s–that’s a pretty
simple thing to implement. So if that were
a feature request, that could be pretty simple. man: So given 12 vertices,
I would know– I’d have the latitude
and longitude of each point. Nurik: So if that feature
was implemented and it gave you
the vertex index, you’d just look
in your coordinates, get that coordinate
at that index, and get the latitude
and longitude and it’d be pretty simple. man: Thanks.
Nurik: Yeah. Any other questions? No. Okay.
Thanks, everybody, for coming. Oh, yep. man: Can we use
the same libraries for the Google Earth
Enterprise? Nurik:
Google Earth Enterprise– you should be able to. It’s just JavaScript. It’s pure JavaScript,
so you should be able to, yeah, without a problem. man: Maps API 3,
it doesn’t support– Nurik:
Oh, Maps API v3 support for–support for
GSatellite 3D Map? It doesn’t support that yet. But again, I can’t comment
to whether or not it will, or any road map for that. But it doesn’t support it
as of now. man: That
extensions library– can you–
does it come packaged or does it reference
a lot of external URLs? Nurik: It comes
completely standalone. And it’s completely,
like, minified, so the–the full library– by the way,
the extensions library includes the geojs library and the exten–and the Earth API
extensions library. That library altogether
is 40K. It has
no external dependencies. man: I meant, like, for all
the images on the place… Nurik:
Oh, images? So it doesn’t–so the only
images it works with are stock images. Images like the–
like the blue paddle, the red paddle,
things like that. The images for
the geometry toolbox that you saw in My Earth, those actually aren’t part
of the utility library. So those were just custom
for My Earth. But the utility library doesn’t have any
image dependencies. Make sense? man: Yeah, kind of.
[chuckles] man: Do you know
of any techniques to capture thumbnails
and/or video of Google Earth? Nurik: That’s–
again, that’s been a very often
requested feature, specifically thumbnails
and screenshots for the use case
of printing, right? That’s–in general,
it’s kind of difficult. Just the simple way of–
the simple problem of how does
a client-side plugin create a stream that
the browser can access, right? One idea would be to use,
like, data URLs or something. It’s just–
it’s a technolog– it’s a technical problem that’s
pretty difficult to solve, and we are thinking about it, but we haven’t had–
made any progress on that. One thing you can do– and again,
I don’t know if this is… legal in terms
of imagery capture, but one thing
people have been able to do was to take the plugin, embed it in
a web browser control inside of, like,
a desktop application, and then have
the desktop application take a screenshot of that. And I’m not sure if that– if that violates
any terms of service, and Peter
would probably know, but that’s the technical way
of doing that. Peter: I’m always the bad guy
who has to come up here. So, yeah, I mean,
in general, within the terms, you’re not allowed
to pull content out of the context
of Google Earth, so you can’t like, you know,
take a screenshot and bring that into
another application or something because that’s
a violation of the terms. But we’re also looking
at ways–are there, you know, additional things
we can put into the API that– you know,
we have, for example, a static Maps API that allows you to embed images
from satellite imageries. That’s one way that
you can bring that in, so… Nurik:
All right. So it looks like
there’s no more questions. Thanks, everybody,
for coming. And I just want to throw up
that URL again for anybody
that wants to… wait–there we go. So this URL
will have all the links to all the demos
that I’ve done today and– as well as the links
to the utility libraries that we’ve just released. Thanks, everybody,
for coming. [applause]

11 thoughts on “Google I/O 2009 – Advanced 3D Geo Apps for Web: Earth API

  1. something about it doesn't look as sharp as before or the zoom as good on windows 7. Also gifs aren't animated on windows 7 picture viewer. Sucks.

  2. Good idea but – I am in Mozilla firefox, Google, but for some reason I just cannot use Google Earth API,
    the download does not work.
    What can I do to successfully download this option?

Leave a Reply

Your email address will not be published. Required fields are marked *