Tip:
Highlight text to annotate it
X
MANO MARKS: Hi.
I'm Mano Marks.
LUKE MAHE: And I'm Luke Mahe.
MANO MARKS: And we're on the Maps Developer Relations Team.
LUKE MAHE: And we're here to talk to you about Getting the
Other Mapping Platform, Getting Your Maps Into iOS.
MANO MARKS: So back in December, we released the
Google Maps for iPhone, an application that allowed you
to use the Google Maps app directly on the iPhone, and it
was a major update to Google Maps.
Much like we had on Android, the Google Maps app on the
iPhone used vector rendering to deliver a really powerful,
immersive experience in Maps that you could view Google
Maps data on top of.
Now when we released it, as soon as we released it, we
actually released an SDK because developers were
clamoring for it right away.
And the reason was because it allowed them to embed Google
Maps data and Google Maps services on top of their
applications.
And it took advantage of the same rendering engine that we
used in the Google Maps iPhone application to render data
within the SDK.
So we basically got all that for free.
LUKE MAHE: So when we launched the SDK in December of 2012,
we launched a limited preview.
But then in January of 2013, we launched publicly.
And as you can see, we've had about two
releases every month.
And today, as was announced in the keynote, we have a special
Version 1.3 release, where we're going to have some cool
features to show off.
MANO MARKS: Yes, and we'll get to that later.
LUKE MAHE: We're not going to tell you exactly how to get
started because there's some documentation.
You can go to developers.google.com/maps and
have a read up.
We'll talk a little bit about what to do with the SDK, but
we're not going to talk to you about how to download and get
all that little stuff going.
MANO MARKS: So the first thing to note is that the Google
Maps SDK is a static library.
It's a framework that you download and incorporate
directly into your applications.
This gives you some advantages.
That is, if we make an update to the SDK, you don't have to
update immediately.
You can take time to evaluate the update and change your
code, and change it in your next release.
Therefore, your app will continue to work.
Although we will give you a warning if you're developing
in Xcode and using the simulator, we will log a
warning that says, by the way, there's another
version of the SDK.
On the other hand, the basic services that were working
will continue to work, and the Maps themselves will continue
to update as we get new Map data, much like
all the other platforms.
LUKE MAHE: We also have a notify group that you can
join-- which you can find a link on our Developer site--
and that's where we will email you every
time we do a release.
And so you can actually get notified of when to go and
download the new SDK, what's changed, and then what do you
need to do.
MANO MARKS: Right.
So there's a little bit of confusion about this on Stack
Overflow and various developer communities that there's a bit
of myth around Storyboards.
Google Maps SDK does actually work with Storyboards, unlike
some people think that it doesn't.
We are very happy to develop with Storyboards, and that's,
personally, my favorite way of developing a UI.
When you go into Interface Builder, you simply create a
new view, and then you make it of type GMS MapView.
And then that allows you to do any of your normal sort of
delegating and flow through that you might do using
Storyboards.
LUKE MAHE: You can also add a UI view and set that type to
be a GMS MapView as well, and then you can resize it and do
all the things you're kind of used to when playing with
Storyboards.
MANO MARKS: Right.
LUKE MAHE: I'll show you a little bit of
super simple code.
For those who are coming from JavaScript Maps, this might be
a little different.
We've now got what's called a camera, and I'll show you a
bit more about a camera later on because I find it really
fascinating.
There are all the cool things you can do with it.
But what we do is we create a camera, add a latitude and
longitude and the zoom level, and then we instantiate a new
map with that camera and a size.
Here we're doing a req 0, but because it's UI view, it'll
fill up the whole view.
And then we create a marker, where we add it to the map by
setting map equals mapView.
If you've come from some other mobile mapping APIs, you may
be used to asking the map to add things to the markers to
the map for you.
But with the way we're doing this, it's kind of following
what we've done in JavaScript v3, where you have a marker
and then you just tell it what map to be on.
So if you want to have multiple maps and then just
move that marker around, you can.
MANO MARKS: And this allows you to do interesting things,
like you can do your own marker management.
So say you wanted to create two separate arrays of markers
or dictionaries that had different properties
associated with different markers, this would allow you
to implement that kind of thing, say, a cluster
management tool or something like that, within your code.
LUKE MAHE: We should talk a little bit about the features.
MANO MARKS: Right.
Let's talk about the features.
It's a map, and these are some of the basic features that you
expect when you get a map, right?
You want to put a marker on your map.
I think pretty much on any web application, any SDK, you'd
expect that, right?
We also have polylines.
Again, pretty basic.
Here you can see we have a demo of the polyline that goes
across the International Date Line.
It's a geodesic, so it follows the curvature of the globe
instead of the direct Mercator line.
And then we also have polygons.
And of course, all of these overlays support touch events.
LUKE MAHE: We also have the camera.
So with the camera, I'll actually get into more detail
later on about the camera.
But we can show you, we can have the camera.
We can control it.
We also have a traffic layer.
Obviously, this isn't a live feed because if it was, around
Moscone it would just be red.
And we also have Compass and My Location.
So the Compass is where you can re-rotate the map back to
pointing to north.
And then My Location will just move the map to where the user
actually is.
And we have all the map types you're used to enjoying.
We've got road maps.
We've got satellite maps.
We've got hybrid, which is a combination of satellite with
the layers on top.
And we also have our terrain maps.
MANO MARKS: Right.
So these are the basic map types that you would expect in
any Google Maps app.
It's used the same map data that you would get in the
JavaScript Maps API, on maps.google.com, and the
Android API.
And we also have the largest imagery collection in the
world that is available on all three platforms, as well as
our terrain layer.
We also, by the way, if you don't want to use the SDK, we
do have a URL scheme that allows you to open up-- if you
use this URL scheme, you can open up the Google Maps for
iPhone application if it exists on the device.
Or you can use the same URL to then send a query to
maps.google.com if the app does not exist.
LUKE MAHE: So I said I'd talk a bit about the camera because
I find it really fascinating, being able to do all the
interesting things.
With the camera now, we've got this thing called a target.
So if you're coming from the JavaScript Maps, this is what
would be something like your map's center.
But instead, we call it a target, and this is where
you're looking at on the world.
So you can use the target to look down and move it around.
We also have a bearing.
So the bearing is the rotation of the map.
So you can rotate the map between zero and 360 degrees,
with zero being north.
And you can see as the map rotates,
the labels move nicely.
They get out of the way or they just kind of shift
around, and that's all taken care of for you.
We also have the viewing angle.
So the viewing angle is the angle at which you're looking
at your target.
So you can see here, we're kind of tilting the camera to
look at the Earth at a different angle.
So if your angle is zero, you're looking straight down.
And you can tilt it to about 45 degrees, and then you can
get a really cool perspective of the Earth.
MANO MARKS: And then you see the 3D building zoom out of
the map when you get that close.
LUKE MAHE: Yeah.
And we also have a zoom.
And because it's all vector data, we can do this really
nice smooth zooming in and out.
We also have the discrete zoom levels that you're used to, so
we've got to zoom level two, three, four.
But you can also go to 2.6, 9.12, and have
little bits in between.
MANO MARKS: Not 9.12 because nobody goes there, right?
[LAUGHS]
LUKE MAHE: And then you can do, like, really cool,
interesting things.
And then see, as we zoom more into the map and can get close
to the Earth, the 3D buildings appear.
And then as we zoom out, the 3D buildings go away.
And then combining all these things, you can do really
interesting implementations on your map.
So you can see here, as we move into Melbourne, we kind
of rotate the map.
We're angling down a bit more to get more perspective of
what we're looking at.
And then as we get closer, the 3D buildings
grow out of the ground.
And we're also kind of shifting to where the camera
is looking and then kind of moving around.
And then we could just sit there and
look at this all day.
MANO MARKS: And as Luke said, this is all because we have
these vector-based maps.
We're basically passing map data down to the SDK, and the
SDK is rendering it on the fly in the position, the angle,
the bearing, the zoom, everything
that you want to have.
LUKE MAHE: And these are all programmatically done at the
moment, but we also have all of these controls in gestures
for when the user's actually interacting with your
application.
So we have what you're used to.
You can pinch to zoom.
You can kind of fling and have a little bit of inertia.
You can use the two fingers to tilt.
And then go in more, and then you get your 3D buildings, and
you can rotate around and kind of move.
And it's all the things that you're used to in a maps
application, and especially in a Google Maps application.
MANO MARKS: So we also have something new.
We promised this to you at the beginning.
We're now delivering a new feature in the
Maps SDK as of today.
Version 1.3 of the SDK has tile overlays.
So tile overlays are the ability to add your own map
tiles on top of our maps, or in the case of this one, in
place of our maps, and we will then use the SDK to render
those map tiles.
And in this case, we're using raster tiles and then putting
them on top of our vector data that's already been rendered.
And you can see here, this is estimates of geothermal
capabilities in the United States.
So these are where we believe there are reservoirs of
geothermal energy in the US.
And the previous one was actually the World at Night,
the NASA Black Marble data.
And we believe this is a really tremendously powerful
way for you to bring in your own kind of data.
And some examples are, you may use this for generating heat
maps or showing off old maps scanned from sort of
historical map archives.
And this last feature basically brings us to feature
parity with the Android API.
LUKE MAHE: A little bit of code here.
We don't want to show too much code, but we wanted to show
you how simple it is to add a tile overlay to your map.
All you're doing is requesting a URL with a x, a y, and a
zoom value, and then we will request that and we'll put in
the right spot.
So here we create just a block that takes these values and
returns a URL string--
I mean an NSURL.
And then we pass that to the tile layer, and then we add
that tile layer to the map.
MANO MARKS: So let's talk a moment about
extending the platform.
So Google Maps has a ton of data that we provide to you,
aside from what's provided directly through the SDK.
We have a number of different web services that you can use
to add data, regardless of what platform you're
displaying the map on.
And because these are Google Maps, you can use them to
display this Google data.
LUKE MAHE: The first one I like to show off is Places.
So we've got a Places API, which has access to millions
of points of interest around the globe.
And we can do searches for it, and then get more rich
information to add to your map.
So here we did a search for Mexican
food around San Francisco.
And then, based on all the points that came back, I
tapped on one, and then I could load more information
about that.
So here we're just getting a bunch of photos.
We can flick through.
We can get the name, but we can also get reviews, the
address, and other interesting information about that.
We also have a couple of other searches.
We've got your Nearby search.
We've got Radar search.
And we've got a query-complete implementation for you.
MANO MARKS: Autocomplete.
LUKE MAHE: Autocomplete, yes.
Here's a bit of code.
Don't be too scared about this.
We're just doing a asynch request with a URL.
All the web services we're going to show you kind of are
going to follow the same fashion.
You do a request, and you can ask for JSON
or XML to come back.
And then based on the data that comes back, we can loop
through and then we can add the markers to a map.
MANO MARKS: So another key service that we don't provide
directly in the SDK, but we do provide on a web service, is
the Directions API.
And in this sample, what we're showing you is the ability of
the Directions API to adjust, depending on the number of
waypoints that you want to put in between.
So if you've heard of the travelling salesman problem,
we basically help you solve that by taking a starting
location and an ending location, and then if you
throw waypoints at us and tell us to optimize the route, we
will find the fastest route between them.
We allow, in the free API, up to eight waypoints, aside from
the start and end location.
And in the Maps API for Business, we allow up to 23.
So this is, again, a really nice way to give information
to your users, and it's quite snappy.
LUKE MAHE: And so in the same fashion as the Places API, we
just do a URL request, the URL Fetch, essentially, to the
Directions API.
And what I want to point out here is what we're getting
back is an encoded polyline as part of the request.
And the encoded polyline, you might think it's like my cat
walked across the keyboard.
But it's actually the way we encode polylines.
So instead of having a whole lot of latitude and longitude
points, we can just send a string down and then decode
that and then put the path on the map.
MANO MARKS: Right.
You actually do get direct access to all the coordinate
pairs if you want those.
We can also, through the SDK, re-encode polylines if you
want to use them here or, perhaps, store an encoded
polyline or pass it to somebody who might be using it
in the JavaScript Maps API.
So we also do geocoding.
Geocoding is the art of taking an address or a place and
turning it into a latitude/longitude pair.
So here, it's actually pretty simple.
We're seeing-- well, of course, Perth.
You did Perth, didn't you?
LUKE MAHE: It's the best place in the world.
MANO MARKS: So we start with Perth and demonstrate Perth.
And as you can see, it just returns back the geocode.
And then the next one is Paris, which always looks good
on a big screen.
So a very simple method of getting a
latitude/longitude pair.
And we will actually, if the result is not 100% clear,
we'll pass back to you some alternatives,
should you ask for them.
LUKE MAHE: Also on the platform we
have reverse geocoding.
So it's the implementation of taking the latitude and
longitude pair and actually converting it to an address.
Here's a bit of code where we can set up a handler for when
someone actually taps on the map.
And then when someone taps on it, we send off a request to
do a reverse geocode.
And then based on the result, we'll put a marker on a map.
MANO MARKS: So this is actually built in to the SDK,
pretty standard on a lot of platforms.
So let's talk a little bit about making these maps your
own and jazzing them up using some capabilities that are
built in to the platform as well as the SDK.
LUKE MAHE: So the first one I want to show is marker
animations.
So in the iOS app that we launched, we had these marker
animations where the marker just kind of grew out of the
ground, and we thought that was really cool.
So we decided to add it to the SDK.
So as you can see here, when a marker is added to the map, it
kind of pops up out of the ground, which is a really good
way of drawing attention to the piece of information that
you've just added to the map.
We also have the ability to color our
markers, the default markers.
You don't actually have to supply a new image every time.
You can use our base image, but you can change the hue and
saturation and alpha values to have it
colored however you want.
MANO MARKS: This is a change for those of you who may have
started with the SDK when we first released it, where we
only had the default red marker.
LUKE MAHE: So you can see here, I've got a little magic
function which will return me a random value for the hue.
But then based on that, I can create a marker, and then I
just set the icon to be the color.
And I also set the animator to be yes, and then it will grow
out of the ground when it gets added to the map.
I also want to talk about Core Animation.
So you can see all these demos that had
really nice camera movement.
It wasn't just a standard move from A to B. I use Core
Animation for a lot of these to be able to define that I
would like the camera values to move from one specific
value to another one.
And I can define the style of curve of animation that I'd
like and also what kind of values I want.
So you can see here, I've got a little tour that flies
around the world on my next trip that I'd like to go to.
And then what we're doing is I'm just
zooming out the camera.
And then as I go between two locations, I can actually ease
in and ease out and then move the thing, and I have a marker
that flies in.
So a little bit about the code.
This is not too scary as well.
We can use the curve, the animation timing curve.
So here I'm defining an ease in and ease out function.
And then using that, we can actually create an animation.
And for here, I'm actually saying I'd like the latitude
key to be animated over five seconds, I'd like to use this
curve, and I'd like to move it to this value, and then we add
it to that.
The same thing as goes with the keyframe animation, but
here we can define steps of values
we'd like to go through.
And we can do this for the latitude and longitude and
zoom, bearing, and camera angle.
MANO MARKS: So the final thing is, you might have seen this
during the opening when we were actually introducing
ourselves, the little puzzle that solves itself.
And actually, I'm going to challenge you.
I want you to do this on the phone.
This is actually an app.
It looks like it's something that we just created.
But I'm going to challenge Luke to try and actually--
LUKE MAHE: No.
MANO MARKS: You don't know.
LUKE MAHE: There's a reason--
MANO MARKS: Neither of us can actually solve that puzzle.
But that actually is an application, and it takes
advantage of, again, taking advantage of the iOS platform
and its ability to generate images.
LUKE MAHE: Yeah.
So what we can do is we can use this render in context
method to actually render an image of the map as it is in
its current state and then return a UI image with that.
So if any of you have seen this thing where you've got
fancy, folding maps, where it comes in from the side and you
just pull it out, they're usually going to use the same
idiom because that's kind of how it's done on the platform.
And so using this method, we can actually extend the
platform so you can actually do interesting things with it.
And as long as it kind of ends up as a Google map that you
can interact with, then that's really cool.
MANO MARKS: Right.
So we hope that what we've been able to show you in this
presentation is how you can take advantage of both the
native iOS platform as well as Google Maps and some of our
Google services to generate a really rich and also very
familiar experience to your users, where your users are
looking at a Google map, which is what most of them will be
expecting to see pretty much for any map.
And you take advantage of our rich amount of data and
imagery that you can incorporate into your own
application.
So to get started, developers.google.com/maps for
our developer documentation.
We also do Google Maps Developer Live.
So part of the Google Developer Live program, just
do /live/maps.
And often it's Luke or I doing a little five minute--
five or 10-minute map shortcut on iOS issues.
So thanks very much, everyone, for coming.
And--
[APPLAUSE]
MANO MARKS: -you can, of course, find us on Google+.
So we'll take questions now.
If you want to ask a question, please come up to the
microphone, and we will take the question there.
AUDIENCE: Hi.
I'm Alex from HTC.
And I'm wondering--
so the previous slides about rendering into your image.
Is it possible to point top left geocoordinate and the
bottom right and zoom level and render exactly, not
exactly as the screen, but something bigger?
LUKE MAHE: No, you can't.
That's not possible.
AUDIENCE: No, it's not possible.
LUKE MAHE: But you could do something interesting by using
the projection object to kind of work something out
if you wanted to.
But obviously, you can't take that image and store it and
keep it forever.
AUDIENCE: Yeah, yeah.
OK.
Thank you.
AUDIENCE: Sort of on a similar note, is there a way to do the
Render an Image and get an image of a map, but do it on a
background thread?
So if you had like a quickly-scrolling UI, and you
wanted to like put a map inside of that scrolling UI or
something, to be able to, like, have it render on a
background thread so you don't block--
LUKE MAHE: No.
Currently, the map runs in the UI thread, so there's
currently no way of doing that.
AUDIENCE: OK, thanks.
AUDIENCE: Two questions related to availability with
this new API that's out there--
the offline maps feature and Maps Engine Layer or Map Data
layer-- are either of those available in the iOS platform?
LUKE MAHE: Neither of those are currently
available in the platform.
MANO MARKS: That is correct.
The Google Maps Engine, if you use that, does have a WMS
output, and that's actually what we used for this tile
overlay demo.
We used a publicly-available map in the Google Maps Gallery
for the World at Night, the so-called Black Marble
imagery, and then generated WMS tile overlay.
And what was interesting about that is WMS doesn't come out
exactly how our tile overlay expects to see it.
And because you can--
LUKE MAHE: Subclass.
MANO MARKS: --implement that, you can subclass--
thank you, it was, like, I know, my brain just shut off
there for a second-- because you can subclass the tile
renderer, you can fudge it so that that gets the right URL
and pulls it into the tile overlay.
It works the same way that you would expect it to work in the
JavaScript or Android app.
LUKE MAHE: You can basically take the same URLs from
Android and JavaScript and use them in this.
AUDIENCE: Is that app you had with the fudging then
available in the GIT Repository or do you--
LUKE MAHE: Yeah.
We'll put that code up somewhere.
AUDIENCE: OK.
Thank you.
AUDIENCE: Hi.
I have two questions.
One is about Geofencing.
In the morning you had some demos, I
think for the Android.
How about for the iOS?
MANO MARKS: Well, so Geofencing was released as
part of the Google Play services, which is only
available on Android.
You certainly could implement it yourself.
I understand it's pretty
battery-intensive to do it yourself.
But currently we don't have it available in
the Google Maps SDK.
AUDIENCE: Second question is how about the indoor maps?
MANO MARKS: Indoor maps?
Currently we don't have indoor maps in the iOS SDK.
AUDIENCE: OK, cool.
Thanks.
MANO MARKS: Sure.
AUDIENCE: We need to animate our markers.
Can we do that with your SDK?
LUKE MAHE: Currently, the only animation that we actually
have is the grow animation.
We haven't got any other animations, and you can't
supply your own yet.
AUDIENCE: So we can't supply new images regularly or--
LUKE MAHE: You can change the marker image and have whatever
marker image you want if you want to do that.
Like what sort of animation are you interested in doing?
AUDIENCE: Well, there's a few things.
We need to flash some of them, and we also need some of them
to rotate reasonably often.
So what we can't have is something that flickers with
destroying and remaking new ones.
LUKE MAHE: Yes.
You don't actually have to destroy or remake the marker
because you actually keep a reference to that marker now.
It's not actually added to the map and then forgotten about.
You can keep that marker, and you can keep
changing the icon.
AUDIENCE: OK.
And another question is, can we add our own vector layers?
LUKE MAHE: Not yet.
AUDIENCE: But, you said yet?
LUKE MAHE: Well, no.
You pushed me.
AUDIENCE: OK.
Thank you.
MANO MARKS: Luke?
Yeah.
Are there any more questions?
LUKE MAHE: Cool.
MANO MARKS: All right.
LUKE MAHE: Thank you, everybody.
MANO MARKS: All right, thank you.
[APPLAUSE]