SPEAKER: Hi.
Welcome to this series on geocasts,
where you can walk your way through what you
can do with Google Maps APIs.
[MUSIC PLAYING]
In part one, we saw how you could delegate your mapping
work to the Google Maps app.
In part two, we saw how you could go further
by incorporating Google Maps functionality
right in your app.
In this video, we'll go a bit deeper
and we'll talk about integrating maps more deeply
and customizing the maps experience for the user.
First, let's take a look at the bus tracker
app that was written for Google I/O. Now
here's a screenshot of it.
Consider the map here and how it's concisely
styled to the rest of the app.
In this example, we're doing it using the JS Maps API V3,
but custom styling is also available on Android and iOS.
Now, often you'll want to style your experience
to match whatever else is on your app or site.
And you need to build everything around that.
So the map is only a part of your site.
So here's an example of the styling
that we used in order to have a map fade
into the background of this app.
It allows the user to focus on the important information,
like the nearby bus stops.
Next up, let's look at the camera
and how you can use it on Android and iOS
to really bring your maps to life.
For example, check out downtown Los Angeles here.
By tweaking the camera settings, I'm
making the experience feel more real.
3D buildings pop up.
And I'm able to see this place the same way I would
if I was there.
It's quite a bit better than just
looking at these top down maps.
Now you can achieve this sort of effect with very little code.
And here's how we did it on Android.
We've been changing the bearing, tilt, and zoom values
to give us this perspective.
But to make that camera move around more slowly,
we've been using the animate camera method.
And what it does is it looks at your source and destination
and then interpolates a path there
so that the camera smoothly animates to that position.
So we've seen it on Android.
Let's look at what it looks like on iOS.
It's quite similar, right?
We've seen the 3D buildings and those maps
are just coming alive.
The code is also quite similar.
We have a camera.
And then we set some parameters on it.
We're creating a GMS camera position,
and then providing those appropriate values.
Now just something to note-- what we called tilt on Android
we're calling view angle or viewing angle on iOS.
Now let's look at a different scenario--
one that involves markers.
Here we have a map of Italian restaurants in Rome.
Now, Italian restaurants in Rome means
that you have a lot of markers.
So it's not very easy to see all of these markers
as you're looking at the map.
So that's where marker clustering helps us.
And it's available in the maps utils open source libraries.
And what we can do is take these markers and group them
into clusters.
And it provides a better user experience,
and also provides better performance.
So implementing it actually ends up often
with less code than if you were managing the markers yourself.
So let's have a look at the code and you'll
see that it's a four step process on Android.
What we're doing is we're adding the utils library
to your gradle configuration.
Then we need to go and implement a cluster item
interface on our data classes.
In our example, this would be the object that
stores restaurant information.
What we'll then do is instantiate a ClusterManager,
and then register the camera and marker click
listeners to that manager.
Then all we have to do is go and add our data items
to the ClusterManager.
Now these are those same data items
we talked about that hold the restaurant information,
and have implemented that cluster item interface.
That's it.
You can then remove your marker management code,
since this library will handle it for you.
Now in this example, we've looked at Android code,
but we also have a utils library on iOS that
includes marker clustering.
And you can go grab it right here.
So we've looked at marker clustering,
but I want to show you another great visualization-- heat
maps.
So let's look at that heat map of Rome with those restaurants.
And you can immediately see that those restaurants,
those locations of restaurants, are now grouped by colors.
You can see where the busy areas, where
are the hot spots, quite literally,
and interesting areas for us to visit.
So as I zoom in and out, I get a really nice experience.
In terms of the code, it's very similar to what we just saw.
And it's pretty simple.
This time we have a three step process.
We add our utils library to the gradle config.
We then go and instantiate a HeatMapTileProvider
and pass in those data items.
And then we just go ahead and create the tile overlay.
That's it.
So now you've seen how you can delegate
your work to Google Maps.
You've seen how you can incorporate Google Maps
functionality into your app.
And in this episode, you've seen technologies
for integrating maps and maps data in your apps.
In the next video, we're going to go
to the deepest point-- taking raw data from Google
and using it in your apps.
Thanks for watching.
[MUSIC PLAYING]