Tip:
Highlight text to annotate it
X
NABIL NAGHDY: Hi, everyone.
My name is Nabil Naghdy.
I'm the product manager on the Google Maps API.
JOSH LIVNI: And my name is Josh Livni.
I'm on the Maps Developer Relations Team.
NABIL NAGHDY: So today, what we wanted to talk to you about
was what you can do that's more than just a map.
So today, there are over 800,000 sites that utilize the
Google Maps API.
And each one of them tries to tell a special story, tries to
give the user a context of where they are or
what they're doing.
Unfortunately, the majority of these maps have got the iconic
red pin and stick it on a map and say, I'm done.
Let's pack it up.
That's it, finished.
Whereas, there's so much more you can add to a map to give
it extra context, to give it more meaning and make a much
richer experience for the users.
So what we're going to talk about today, in this session,
is what are some of these features, and how can they
relate to your site.
So what we'll do is we'll start in 2005.
For those that came to the session earlier, it's a little
bit of a history repeating itself.
But what we have is, pre-2005, the way you navigated a map
was you saw a static image that was there for you.
And you pressed the Right Arrow.
And the page would refresh, and you'd get another image
that was slightly to the right.
And that was pretty much it.
In 2005, Google launched Google Maps.
For those that remember, you take your mouse.
You put it on the map.
And you kind of double click.
It zooms in.
You're like, oh, that's pretty cool.
I'm zooming in.
And then you move the map around.
And you're like, wow, the map is dynamic?
And it kind of changed the way in which we interact with the
website, with a map, specifically.
So this was the first time that AJAX was actually
properly used on a grand scale.
So the way that Google did this was by pre-rendering all
the map tiles and then loading them behind the scenes, so
that when you moved the map around, it would just pull
that image and put it there.
So this was pretty revolutionary in 2005.
A lot of people who saw this thought, wow,
this is pretty cool.
What can I do to build on top of this?
JOSH LIVNI: Yeah.
So a bunch of folks thought it was amazing and immediately
started reverse-engineering the JavaScript, trying to
figure out what was this cross-domain stuff, how do we
sort of take control of this map, put
our own data on there.
It was very exciting to people.
The first mash-up was the housingmaps.com.
It's still around, a pretty venerable site.
It still looks a bit like it did when it first launched, a
few changes, since it's using the Maps API V2.
But it's important to remember this was originally built
before there was an API.
It kind of instigated web APIs as we know them today, mashups
as we know them today.
And really a lot of maps today have a very similar story as
what we have right here, which is, you have some data.
Maybe it's 10 points.
Maybe it's 10,000.
Maybe it's a couple million.
You're trying to display a subset of them on a map so
people can interact with them.
And you end up with this kind of a thing here, which is--
in this case, it's some Craigslist data.
NABIL NAGHDY: So basically, you've got a whole bunch of
cities where Craigslist has property.
You have things like filters for pricing and any other
information, really easy to use, easy to navigate.
When you click on a pin, a little pop up comes up with
pictures or any information relevant to
that specific property.
So that was really awesome and innovative, for its time.
JOSH LIVNI: Yeah.
And again, this is a common story that a lot of people
want to be able to--
I should click out of this IFrame here-- a lot of people
want to be able to repeat.
And so, in order to think about how would you rebuild
this type of thing today, let's take a look what's,
first of all, changed in the infrastructure.
If that's what you could do seven years ago, when we had
basically one set of data, we'd pre-render some tiles,
let's see what's a little bit different today.
This is a very, very simplified diagram.
You can imagine we have more complex ones.
But the general story here is-- first of all, we have a
lot more data.
If you're looking up at the big kind of gray box, we have
the imagery.
That was added a year after, in 2006.
Then we have a bunch of satellite data.
And we have a ton of imagery.
We have, in this kind of little bucket here, over 20
petabytes of imagery from various
different data sources.
That's a lot.
We have some other data we throw on top of there.
Maybe it's like a cycling layer.
Maybe it's live traffic coming in from a bunch of different
data sources.
We have a lot more places today.
We have over 80 million places.
Again, kind of give you some extra context of what's going
on around you, with establishments and other types
of things, like landmarks and so forth.
And then we have kind of the main feature,
which is the roadmap.
And a ton of stuff has changed there.
We're not going to go in too much detail here, except to
say, the major things that have changed is, one, there's
this kind of feedback loop that's just much faster.
First of all, you can report problems.
We'll take a look.
You can edit the map directly at Map Maker.
Once that edit has been moderated, sometimes they're
automatically approved.
Simple edit, and we trust you, for various reasons, like
you've made previously good edits.
And then those go live.
And a matter of minutes later, it'll be globally distributed.
And then, finally, we custom push out the tiles to you now.
So if you remember back seven years ago, we kind of scoffed
at that idea that you click Right and then it renders a
Map View, and 10 seconds later you have one.
Now, you make a change to the style of your map or add some
layer, and you hit a little button in JavaScript, and 10
milliseconds later, you have a bunch of tiles that are
custom-generated just for you, [? appropriate ?]
language and so forth.
NABIL NAGHDY: It's really powerful.
It's a really strong way to display all this imagery.
And it's incredibly fast.
So looking at what the current architecture is, how would we
go about creating--
in this example, for today, we'll look at
a real estate site.
And so what would be the simplest way
for you to do that?
And what are the different ways in which we can use the
different features of the Maps API Suite to enhance the real
estate platform, on top of what we've seen, from what
HousingMaps did?
JOSH LIVNI: So again, this is a really common problem,
applies to a ton of different verticals.
Maybe you're looking for ski resorts in Tahoe.
You could be looking for local soccer fields or burrito
places in San Francisco.
Or you have a chain of hotels, or what have you.
We're going to do the kind of HousingMaps example here, with
the real estate sites.
But this Store Locator, as you could imagine, applies well to
someone with a bunch of stores.
And it solves the same kind of problem.
I have a bunch of points.
I want to allow people to be able to find what's around me,
as I say, the closest store.
And this library is a third party library, put together by
my colleague Chris Broadfoot.
It's available at storelocator.googlecode.com.
So it's just an open source library.
I'm just mentioning it here as a really great way to kind of
bootstrap the site.
So you don't have to write all of this code from scratch.
If you have this general problem, you've got a bunch of
points, you want people to be able to say, here's where I
am, What's around me, and a bunch of extra stuff we're
going to do in a minute, it's a really great library to get
started with.
So we're going to show you a few features of that.
I first just want to point out that it's got great reference
documentation.
It just works really nicely, a bunch of great features.
We're going to talk about a few of them right now, with
our House Locator.
NABIL NAGHDY: So when you import your data, which we'll
talk about in a second, you get an awesome experience,
right off the bat.
So as you can see, we've got all the
markers that we've imported.
We've got about two and a half thousand different houses we
got from the King County government, from their
property sales data.
So what is already built into the store locator is the
ability to search for a specific location.
So let's say Google in Kirkland.
We have a Kirkland office.
So as you can see, there was autocomplete there.
And what it's done is, it's re-framed our map to center on
Google Kirkland and then reordered all the properties
or all the pins to basically sort by distance, away from
the location.
So let's change it to Google Fremont, which is our other
office in Seattle.
And we can see that all the pins have been reordered, as
you can see on the map.
So it's really powerful.
The other thing that's also available that comes for free
in the Store Locator, built in, is a global filter.
So you can set any variable to be filtered.
In this instance, because Seattle is unbearably cold,
we've decided to include a fireplace.
So if you click on fireplace, it filters out all the
properties that don't have a fireplace with the ones that
do, and displays them on the map.
In the same way, if you're a ski resort site, you can say,
which ski fields have got specialized for snowboarding.
Or there's so many ways in which you
can use these variables.
And it's all pretty much part and parcel
of the Store Locator.
JOSH LIVNI: All right.
So I'm just going to walk you through, just very briefly.
This session is not about the Store Locator.
But we're kind of going to use it as a basis for building up
the rest of these examples here.
So just to explain the minimal amount of concepts you need to
have to build up the Store Locator.
And in maybe less than 100 lines of code, we've put
together that map that you saw right there.
So first of all, after downloading the Store Locator
library, we start up with creating a data feed.
And the data feed here, we're using a static data feed,
because I put the houses in kind of a big JSON file, so I
could stream them over easily, and parse them, and so forth.
It could be a CSV file you parse.
Maybe it's like a collaboratively edited
spreadsheet.
It could also be a dynamic data feed.
So it has good examples for that, as well.
So if you have, say a MySQL database with millions of
points, then you'd just grab a bounding box query to show the
closest ones for the map.
Or it could be an App Engine server or Fusion Tables.
They launched a new API that let's you do JSONP callbacks.
That worked really well.
The point being, it's data source agnostic.
So whatever data you have, it's pretty easy
to bring it in here.
You don't have to worry about this sort of geo store and the
magic of auto-sorting and so forth.
The closest one is taken care for you in the JavaScript.
Then you create a View.
And you basically feed that a map that you've already
instantiated, and the data feed.
There's some options on the View, for example, the one I
have here, the geolocation.
By default, it's true.
And then, when the Store Locator loads, it'll say, do
you allow the map to have your location?
It'll center on your location, which is nice.
But we set it to false.
So I can use the autocomplete, which also comes for free.
And then you create, if you want, the left panel.
So you kind of get that panelDiv that does all of that
sorting and that nice stuff that we saw, with
auto-complete and so forth, just by creating, first of
all, the div for your panel.
Create a new storeLocator.Panel, pass it
into View, good to go.
So I'm not going to go to too much more detail here.
The point being, as great examples in that library, it's
really easy to get started.
NABIL NAGHDY: Yeah, so the first thing you want to do
when you're importing your data is kind of change the way
it looks to customize it.
And the easiest way to do that is to use custom icons.
So in this instance, we've simply replaced the red pin
and put in a funky blue house.
Now, this is a fundamental thing that
everyone should be doing.
The least you can kind of change is the red pin, to make
it relevant to whatever you're doing.
JOSH LIVNI: Yeah, absolutely.
In this case, house kind of makes sense.
But it could be different-colored houses,
dynamically, if it had a fireplace or some other
attributes, or different sizes for the price, et cetera.
So always do the custom icons.
I just want to briefly go over--
I mean, this is not a new concept to most of you.
There is one new thing in here though, so briefly go over how
you customize your icons.
The easiest way, just what we did here is basically, in your
marker options, you have an icon.
And you can pass it in a number of things.
The first and easiest is just URL, so
in this case, house.png.
That's my image.
And that's all I have to do.
I'm done.
We get a little more complicated by creating a
marker image and passing a bunch of different
variables, resize it.
Of course, when you have a shadow, it's another marker
image, and so forth.
So that's a great way to go.
That's been around a while.
And then, just out of curiosity, how many of you
were in the session previously, on visualization?
Yeah.
So we introduced a really cool new feature, symbols.
So this is a really great way we can use some pre-defined
symbols, such as a circle.
You see here.
Our arrows, we have a variety of pre-defined symbols.
Or pass in your own arbitrary SVG path,
which is really amazing.
So if I was an artist, I could've drawn a house SVG
path and then used those and animated them and done some
really great stuff with the symbols.
So any of these three are kind of valid ways to create icons.
And then, you just go ahead.
And in the case of the Store Locator, if I want to
customize my icon, I would create a createMarker method
on my View and then pass in your kind of
classic marker options.
This is the location.
It would be the store location.
Icon, whatever icon I chose.
In this case, my house.png.
And you're good to go.
So definitely, take the extra three minutes.
Find yourself a free icon.
Find someone to make you one.
A red pin is great, this beautiful red pin.
But for your map, it's going to be better to have your own.
NABIL NAGHDY: So as was spoken earlier in the keynote, a
really powerful way to give context to your map is to add
satellite imagery.
So at Google, we've got over 20 petabytes of imagery.
Satellite imagery is covered for 75% of the world's
population.
And we add, every two weeks, the same amount of imagery
that we did in all of 2006.
So there's a lot of imagery constantly being updated.
As you can see in this example, we have 45 degree
imagery, as well, or oblique imagery.
And you can set which direction you want to see the
image from.
You also have the ability to--
we can see in Terrain Mode.
So Terrain Mode is really convenient or really powerful
for, in this instance, for real estate sites, but also
for fitness and health sites.
To say, if you're riding your bike from here to Mountain
View or across the bay, what is the elevation, and what are
the mountains nearby, if you were to go for run or a cycle
or whatever.
So it's really powerful data that is really easy to enable.
JOSH LIVNI: Yeah.
So definitely don't just go with the default load map.
Maybe that makes the most sense for you.
You're going to, hopefully, style it, which we'll talk
about in a little bit.
But go ahead and think, does it make more sense to have the
satellite imagery?
It's very easy to change.
You set the MapTypeId to the appropriate base data there,
whether it's a hybrid, such as satellite, with
the labels on top.
The terrain, which is a really nice, kind of clean view of
looking at data.
The roads are less prominent and so forth.
And then, for the 45-degree imagery, just a note that, by
default, we kind of sweep you into that aerial view.
But if you don't want it, you can do map.setTilt to 0.
And then, even if we do have that imagery available in a
city, we'll just keep you in the satellite mode.
And so then, you'll get that kind of straight-down-there
looking view for more zoom levels.
On the other hand, if you do want that, then definitely
think about setting the heading, map.setHeading, to
any of the cardinal views, 90 degrees east, 180 south, and
so forth, so that you can give your users the appropriate
angle, programmatically, or automatically, depending on
your use case.
So yeah, pretty easy to take advantage of those different
base layers.
And then we have more layers.
So we have some layers we threw on top.
I'm just going to take some of these houses out of the way.
A few different layers that we have data for, so the first--
we restyled a map with our cycling data.
We have this for United States and a bunch of Canada.
This is really useful.
I'll skip this one for right now.
We also have a Traffic layer.
This comes in Live Traffic, which is from a variety of
sources, including local roads.
It's not just freeway data.
So that's really useful.
We have a relatively new Weather layer.
So this is kind of neat.
You can see the temperature.
I think it's updated every hour, I believe.
And then, the Panoramio layer, it's been around a while.
But it is really cool.
And I've seen a few sites take advantage
of adding the context.
Here in Seattle, I can see all the bridges, lots of cool
bridges in Seattle.
It's really nice to be able to get this data on.
Just a couple of notes on the Panoramio layer and the
Weather layer--
when you load your Maps JavaScript library, you have
to add those libraries specifically,
Panoramio and Weather.
And you also have, in the Weather layer, a Associated
Cloud layer, here.
So those are updated every hour.
It's pretty cool.
And you can kind of get the live weather on there.
So this is how you do it, very easy.
Again, you instantiate a new, for example, bicycling layer,
set it to the map, or set to null, if you
want it to go away.
And then, the one difference, in the Panoramio Layer, is you
can optionally provide a tag when you instantiate it.
Or set tag, for example, in this case, bridges.
And it'll filter the pictures just to ones that have that
tag, so a bunch of data that we also kind of provide for
extra context on top.
There's also layers that you can provide yourself, such as
the KML layer.
That might be your own data, or some KML you found
somewhere, or a fusion tables layer, again, your data.
But we're just talking about data that we provide here, on
top of the map.
NABIL NAGHDY: So now, we'll get to custom styles, which is
a surprisingly important and quite less-frequently-used
feature of the Google Maps API.
So just a quick show of hands, how many people have heard
about being able to custom style your map?
OK.
So that's--
And how many people actually custom style their map?
So that's about 20% to 30%.
So it's quite good.
I think we have a pretty advanced
group in here, as well.
So styling your map, I think, is a surprisingly easy feature
that should be utilized by everyone.
So the default colors of Google Maps, that it currently
has, is mainly used for maps.google.com.
And you have the ability to kind of change it to what fits
your brand.
So if you have really important data that you're
layering on top, you can kind of make the background look a
little more subtle.
If there are some features that you're highlighting, for
example, if you're a trailing site, you can highlight the
national parks in the map.
So they stand out.
So these are all types of features that you can utilize
in order to differentiate your map from your competitors.
So in all these examples, it's rotating between the--
each one of these examples took us about five minutes to
create with the Styling Wizard, which was launched
last year at I/O. If you simply just Google Google Maps
Styling Wizard, you can come up with it.
And basically, every minor, granular feature of the map,
you can change, the color, the hue, the
saturation, the gamma.
And you can turn things on and off.
It's really, really powerful.
And as was explained earlier, it doesn't impact the speed at
which your tiles are rendered.
So every single tile you see is custom delivered to you, in
your style, in less than 10 milliseconds.
JOSH LIVNI: Yes.
That's a really phenomenal feature.
And there's just a ton of granularity on
what you can style.
I'm not going to go into too much, just point out that
really simple code style, kind of classic case.
You have some data you'd like to put on top of the map.
It's pretty standard.
Our map, maps.google.com, is designed for people who want
directions, all these other things.
You may not need all of that stuff
jumping out at your users.
Set the saturation way back.
So you need a really simple style.
Take everything, kind of make it a little bit more gray
scale, done.
So strongly recommend--
first of all, like Nabil mentioned, always style your
map, kind of match your brand of your website.
It's really worth the extra half hour in the Styling
Wizard to get something that fits your needs.
Maybe hire a designer.
It's pretty easy to use.
And they can do really cool cartography.
And on that note, definitely check
out the session tomorrow.
It's, I believe, at 4 o'clock, a master class in styling.
Really exciting stuff going on in styling.
I strongly recommend you check out some of the styling
functionality that the Maps can offer.
NABIL NAGHDY: All right.
So let's get into the meat of some of the features that
we're going to use.
So in this case, this is going back to the Store Locator.
So directions is another one of the features that you do
get for free as part of the Store Locator.
If I were to click on one of the houses, I can have the
option of doing Straight View, which is quite-- everyone
knows about the Straight View.
You can also zoom in on that specific location.
Then there's directions.
So I click Directions.
And then I want to travel from the Google Kirkland office.
Awesome.
And as you can see, for those that are keen-eyed, this isn't
regular driving directions or cycling.
This is actually transit directions, which launched
this afternoon.
So you can see that it's telling me to walk four
minutes and then jump on a bus by Sound Transit.
So I'm assuming it's a pretty popular Seattle-based--
JOSH LIVNI: People love them.
NABIL NAGHDY: People love Sound Transit.
And so it basically tells us every route, every step of the
way, what requires walking, what requires
bus, requires subway.
There's a lot of different variables you get back from
it, which I think Josh will talk about in a second.
But in this case, we've used Transit.
Obviously, you can use Cycling, Walking, or Driving.
JOSH LIVNI: Yeah, this is a pretty useful feature.
First of all, going back to the Store Locator, it's great.
You get directions for free.
And you could have a little dropdown choosing between
which mode of transport you like.
And yeah, Transit, I'm pretty excited about.
It's been the number one feature
request for quite awhile.
And so I'm just going to show you how easy it is to change
it, kind of one line of change from your regular driving
directions.
We make a request, got a start and end point, bunch of other
options, way points, and so forth, don't necessarily apply
to Transit.
So we'll go a little bit more about what you can with
Transit now.
But for the short term, just note, all you do is set your
travel mode to Transit.
And you're done.
And then you get back some response that we'll look at in
a little bit.
And in this case, I'm setting the Directions Display.
So it renders all of that stuff automatically for me.
But of course, you also get back a JSON result, with a
bunch of data.
Here's an example of what you get back from Web Service.
So we also launched transit on the Web Service today.
So you can use that through the HTTP API.
And this is just a small snippet of the code
that you get back.
But just pointing out some of the things you get.
For example, you get, obviously, when your bus, or
funicular, or ferry is going to arrive, and so forth, a lot
of stuff there.
NABIL NAGHDY: There's, like, 20 different
types of transit vehicles.
JOSH LIVNI: Yep.
So you get that.
You get the number of stops.
NABIL NAGHDY: There's also horse and carriages.
JOSH LIVNI: Yeah.
Actually, they probably have them here.
So for example, this is from Moscone Center to Golden Gate
Park, 32 stops.
That's not a quick bus.
But you eventually get there.
It gives you the time that the bus is going to arrive, in a
few different formats, like a nice, easy display format
that's always in the local time of the user.
That's kind of nice.
And you get the head sign, like which direction it's
traveling, Ocean Beach.
You get headway, which is if you miss it, when we expect
the next one will come, like how many minutes, bunch of
other really useful information.
So that's great.
And then, you can construct your own
estimates on the transit.
And yeah, it works really well.
NABIL NAGHDY: It's really powerful.
And, guys, try it out.
Mock up some mashups, just see what you can do with it and
provide feedback.
So we're really, really excited to have launched it
this afternoon.
JOSH LIVNI: Yeah, we're excited to see the transit
stuff out there.
A quick note on the transit, it launched to all the
countries that we have transit for, in maps.google.com.
That's what, over how many countries?
NABIL NAGHDY: Over 475 different locales, so not
countries, specifically.
JOSH LIVNI: Minus Japan, not in Japan.
But everywhere else, so really, really good coverage
for transit.
NABIL NAGHDY: Yeah, almost global.
So let's move on to some of the other features.
So another show of hands, who is familiar with the Distance
Matrix or the concept of Distance Matrix?
OK, who's used the Distance Matrix API Web Service?
Brilliant.
For those at home, there's, like, one hand up.
JOSH LIVNI: He works at Google.
NABIL NAGHDY: Yeah.
So Distance Matrix is an incredibly powerful tool.
There's a quick demo, just to show exactly how it works and
what the purpose is.
So in this example, we've all the parks that are in San
Francisco, Golden Gate Park, San Bruno Mountain
State Park, et cetera.
So I am in Moscone Center.
I have a friend that lives in Glen Park.
And so what this gives me is the distance between all the
destinations and the origin, as well as the time it'll take
for the method of transport that I've selected.
So in this case, we can determine what the distance
is, or amount of time it takes to drive from Moscone Center
and Glen Park to any of these parks.
So we could also figure out how long it'll
take to cycle there.
So if we were to cycle, looking at this I'd say, I'm
in Moscone, my friend is in Glen Park.
Let's meet at Dolores Park because it's clearly,
perfectly in the middle, 20 minutes and 15 minutes to
cycle there.
So you can go in the Distance Matrix either JavaScript
service, or in the Web Service itself.
You can have up to 100 cells.
So that's like a 10 by 10 matrix.
And it's essentially--
in this case, rather than doing 10 separate Directions
requests, you do one request.
And you get all the results back.
And you display it.
So how does this example relate to Store Locator or
housing site, in our case?
The icons have gone red.
JOSH LIVNI: Yeah, I filtered out all the ones that didn't
have a fireplace.
NABIL NAGHDY: OK, so the red ones mean fire?
JOSH LIVNI: Yeah, pretty good.
NABIL NAGHDY: And it's night time.
JOSH LIVNI: Yeah.
NABIL NAGHDY: OK, cool.
JOSH LIVNI: Fireplaces are a hazard.
NABIL NAGHDY: So let's say we are,
again, in Google Kirkland.
JOSH LIVNI: Yes.
NABIL NAGHDY: So I like to drive to work.
So let's say, driving.
As you can see, we haven't reordered the results.
But what you can tell is, that on the left-hand panel, you
can see the distance between the Google Kirkland office and
that specific house, as well as the time
it'll take to drive.
I actually like to cycle to work.
So can I see the cycling directions?
Awesome.
So anything under an hour, there's one
that's 40 minutes there.
So that would be in my subset of houses I'd look at.
JOSH LIVNI: So what's nice here is that we can start to
annotate the different types of places your users might
want to go really, really quickly, annotate lots of them
at a time, and then start ranking those things.
Maybe I said my criteria for houses is things I can bike to
in half an hour.
I don't have to make a separate request to each one,
so a lot of use cases here for the Distance Matrix.
NABIL NAGHDY: Yeah, really powerful.
JOSH LIVNI: Definitely check it out.
All right.
Let's see here.
Yes.
Code for Distance Matrix is very similar to a Driving
Directions request, except instead of having an origin
and a destination, they can be lists.
So in the case of the house example, I still only have one
origin, where I work, for example, and then a list of
houses, house one, house two, house three, and so forth.
I pass that off.
I can pass similar options in the request, including extra
options, like avoiding tolls, and other such things you can
do with directions.
And then in a single response, I get all of those back.
So in this particular case, I get back a response with a
result of one row, because I only had one origin.
And then each of those would have the time it would take.
You don't get back all the information, like you would
with directions, such as the steps, and the
routes, and so forth.
You get back just the travel time and travel distance, but
a really great way to start annotating your data from
place to place, when you have multiple places.
Maybe you want to have some friends meet in the middle,
and so forth.
All right, Distance Matrix, hope you check it out.
NABIL NAGHDY: So the next thing is Optimized Directions.
So let's say it's a Saturday morning.
And there's a handful of houses that
I've selected to see.
So let's pick, say, the top five or top six houses that we
want to see.
Brilliant.
And you can see the bottom of the left-hand panel.
It totals up the number of minutes it
takes for me to travel.
JOSH LIVNI: Yeah.
So in this case, instead of automatically rendering all
the directions, I just grab the JSON back.
I'm parsing it for each leg along the way.
And then I sum them up at the top, so three hours.
NABIL NAGHDY: So in this case, we've got a three hour and 10
minute drive, if I were to go in the order of places where I
was clicked.
So that's a pretty solid drive.
And it's a big waste of a Saturday morning.
JOSH LIVNI: That sounded right, yeah.
NABIL NAGHDY: So what if I were to click
the Optimize button?
As you can see, the time now is two hours and 14 minutes.
So we've just saved an hour, because it reorders all the
different pins that I've selected, all the different
locations I've selected, and determines what the fastest
route is, essentially going in a circle, between all the
different points.
So rather than an order that I've selected them, it
reorders them to give you the fastest possible route.
The other thing is, I think this route is
going through a bridge.
JOSH LIVNI: Yeah, the 520 here, newly tolled.
NABIL NAGHDY: So I don't want to pay tolls.
So it adds an extra--
I think that was 15 minutes.
It's a pretty big detour.
But I avoid the tolls, which in this case, I would take.
So that's another feature which is also baked in, is to
avoid tolls.
And the code for this is also really,
really easy to implement.
JOSH LIVNI: Yeah, so the Optimized Directions just have
a lot of different use cases, maybe
running a bunch of errands.
Maybe people are going to a vacation site and they want to
see a bunch of different things.
Take advantage of the fact that we've kind of solved this
tricky, traveling-salesman problem for you.
So it's very, very useful.
Our Optimized Direction code should start looking pretty
similar here, with our first request.
Also, you can use this in the Web Service, of course.
The two features I added here were just
options on my request.
OptimizeWaypoints, true, default is false.
And similarly with avoidTolls, set those to true, and you
could take advantage there.
So this is really useful features.
You're making any type of directions request.
You've got some way points, along the way.
Think about whether it's going to be best for users to give
them this option or not.
And oftentimes, it will.
NABIL NAGHDY: All right.
So now we have another API, which is called the Google
Places API.
It's also a service within the JavaScript, which we're using
in this case.
And what that allows us to do, in this housing site that
we've created, is determine what are specific places
around the points of the houses that I'm interested in.
So what we can do is we can click on a certain house.
And in this case, we have schools enabled.
And it will tell me all the schools that are surrounding
this house.
And it does it for each one.
I don't like water, so I wouldn't live on an island.
Yeah, OK.
So essentially, you guys get the idea.
So are there any other options?
As was mentioned in the keynote, there's around 100
different categories you can choose from.
In this case, we've selected a vet.
If you have an ill pet, and you really want to live close
to a vet, you can do that as well.
JOSH LIVNI: I'm curious, where are the vets?
NABIL NAGHDY: The options are innumerable.
JOSH LIVNI: Quite a lot.
Oh, wow.
NABIL NAGHDY: OK.
So let's say, if I was to look for schools around a certain
house, there's also another really cool feature, where I
can filter what Places category I've selected.
So I really like the Montessori system.
So for my kids, I'd want to put in a Montessori school,
for them to go to.
So I select Montessori.
And now, when I click a house, I actually get the location of
all the Montessori schools near the
house that I've selected.
JOSH LIVNI: I was going to mention.
It's important to mention what we're doing here in the
background is using the keyword feature
on the Places request.
And that filters not just on description and name, but also
on the reviews and some other information that
we have on the place.
So if someone says, this school is absolutely not a
Montessori school in one of the comments,
it'll still show up.
It's a great way to filter down quickly.
Just keep in mind what the keyword does.
And it's still, as you can see, really, really useful, if
you're looking for something specific, Italian restaurant
versus restaurants, and so forth.
NABIL NAGHDY: So in this case, it looks like West Seattle has
got two Montessori schools close to each other.
So let's zoom in and have a look and see what the houses
look like there.
JOSH LIVNI: All right.
I think we can go to the next demo for this one.
NABIL NAGHDY: All righty.
So we've got West Seattle, Montessori schools.
JOSH LIVNI: There they are.
NABIL NAGHDY: Ah, Montessori.
JOSH LIVNI: Picky with your schools.
NABIL NAGHDY: Yeah, very picky.
In this demo, if we click on the school, and we have
selected the house, it gives us the walking directions
between the two points.
Now, that red kind of squiggly line that's going above the
directions is actually the elevation between the house
I've selected and the school itself.
So if I want to walk to the school and walk my kids to
school, then this would be a really awesome way for me to
instantaneously see.
OK, this is a bit of an uphill walk.
So I'd go downhill, initially.
And then I'd be walking uphill to the school.
So I'd probably not want to do that.
I'd probably want to go somewhere
where it's a flat walk.
This, obviously, is also the case if you're trying to pick
a neighborhood and if you live on top of a hill and all the
restaurants you want to go to are down the hill.
It's important information.
So this is also incredibly powerful for elevation,
especially for health and fitness sites.
If you want to determine the directions between two points,
you can easily, now with visualization, add this layer
on top, really powerful.
JOSH LIVNI: Yes.
This is pretty cool stuff, using the new symbols again,
which we'll get into in a second here.
But the point here that we have is, with places, don't
just think of it as occasionally your user might
need to see what's around them.
Or I'm building a place's business.
But you can use it in all kinds of places, just to get a
quick look at local density.
I'd love it, when I'm looking at the different housing
sites, just to get an idea of the density of things that are
around me that I care about.
I care about, perhaps, schools because I have kids, parks,
coffee shop, bar, maybe not much else.
And so I just want to know where are those things
relative to the houses I'm looking at.
It applies to many different verticals, again.
So use it in all your applications, if you want to
give the end-user sort of a portal into all of the stuff
that we have around a given location.
Also, think about using the keyword filtering.
Think about, in this case, we were sorting by distance,
which is a relatively new feature.
And so usually, we sort by what's called prominence,
which gets the best results.
I was just curious of the closest results, even if
they're not necessarily the best.
So maybe, if I looked for coffee shops, we think the
best results are a little more spread out.
I just want the closest one.
I want to know if I'm in a block or two.
So think about how you're going to rank the response.
And think about how to sort of mix and match the services.
That's the main point here.
You don't have to just think, OK, I'm a real estate site, so
put some pins in a map with some prices.
Think about, oh, people are probably
going to walk to places.
If they walk to somewhere, we should give directions and let
them know, oh, it's a 10-minute walk
or a 15-minute walk.
Or it's going to be uphill, et cetera, et cetera.
So think of all the different services you can combine when
you're using Places.
And then also, don't miss the session right after this--
"Building a Business with the Places API." So they have a
lot of good stuff to talk about Places
in much more detail.
Briefly mentioned the elevation here.
So you notice that very cool symbology.
The symbols were mentioned in the previous talk.
So I'm not going to talk about how we did
the symbols too much.
But check out the video on YouTube afterwards
if you missed it.
It's a very cool talk on Spatial Data Visualization.
And then the elevation, however, I'll just mention, is
again kind of a similar pattern here.
We make a request to an Elevation Service.
In this case, we're going to pass in a path that we want
elevation for and a number of samples.
In this case, I want 500 samples along the path.
It'll evenly interpolate those samples along the way.
I could also, if I was so inclined, just ask for a
single location, get the elevation back for there.
So in this case, I've already done a Directions request to
get some walking directions.
So I've got an overview path from the route that was
returned to me from the directions.
I pass that into the Elevation.
Elevation will return an array of Elevation responses, which
include the height, the accuracy of the
elevation, and so forth.
So Elevation API, very useful.
NABIL NAGHDY: Powerful.
JOSH LIVNI: Yep, OK.
NABIL NAGHDY: All right.
So our final demo for this afternoon is a really powerful
way in which, for this case and others, you can really
utilize the power of Google's mapping
services or Geo services.
In this case, we've selected the different houses that
we're interested in.
And let's say, you get a URL from
your real estate provider.
And it looks something like this.
So basically, these are all the different
houses we've selected.
But what we're doing is, we've passed it into the Google
Earth API, Google Earth API plug-in.
And we're able to do a flyover, or virtual tour, of
all the different houses that we've selected.
There's a lot of things that are variable, the speed at
which you fly.
In this case, you're rotating.
It's a really immersive experience.
And it doesn't just apply to real estate sites.
For example, there was one recently for the Tour de
France, which is starting next week, where it basically flies
over the entire route.
It's a really awesome way to visualize your data.
And I think it's quite underutilized.
JOSH LIVNI: Yeah.
So definitely check out the Earth API.
If you already have an existing Maps V3 website, then
it's really easy to add an Earth button that just
magically has most of your markers, polygons, other
overlays, and so forth, appear for the user.
NABIL NAGHDY: You can fly through.
JOSH LIVNI: And then, you can add these effects by accessing
that Google Earth itself.
But if you want to use that library, you can go to the
Maps V3 Utility Libraries.
And there's an open source library called Earth.
And that will basically, in a couple of lines of code, let
you add the Earth button, so that you don't have to change
anything in your existing content.
But users who click on Earth-- or you can programmatically
enable it-- can fly around Earth, seeing most of the
stuff that you've already put on the map.
All right.
NABIL NAGHDY: All right.
We seem to have a--
JOSH LIVNI: Different window.
NABIL NAGHDY: We seem to have wrapped up a little bit early.
So I guess, are there any questions?
Or I mean, what we wanted to show in this session was how
important it is to give your maps an extra
bit of oomph, really.
I guess it's really easy to implement
some of these features.
Some of them require a bit of work.
But in a weekend, for example, you can turn a regular red pin
on a map-type of website into a really immersive interactive
experience for your users.
And you'd really stand out in your specific vertical.
So hopefully, some of these examples have been
useful to you guys.
Thank you.
JOSH LIVNI: All right.
Thanks a lot.
And if you have questions, just line up
behind the mics there.
And I'm very curious to hear what you have to say.
AUDIENCE: The loading of the libraries, now you have to
load them with the API.
Would it be possible in the future to load them after the
API has been loaded?
JOSH LIVNI: Are you talking about the Earth API?
AUDIENCE: The Maps API, the libraries, like Places and--
JOSH LIVNI: Oh, sorry.
So you're saying, if you want to use Places, you have to add
the Libraries equals Places, or Panoramio, and so forth.
AUDIENCE: Exactly.
JOSH LIVNI: Yeah, so we do that by design, in order to
send you the minimal amount of JavaScript to get the fastest
loading times.
If you're in a mobile device, we don't want to
send over an extra--
NABIL NAGHDY: All the libraries.
JOSH LIVNI: --5K of data that you don't need.
And so some sites need some things.
Some sites need some other things.
If you don't need the Weather and Cloud layer, we don't want
to send those bits over to your users.
AUDIENCE: Could it be enabled so you could load them
dynamically by, instead of typing, Google.load--
JOSH LIVNI: Oh, I think I see what you're saying.
So you've already instantiated your Map instance.
And you want add in the-- that's a really
good feature request.
Please use the Issue Tracker.
I don't know if you were in the earlier session.
We should point this out again, that the Issue Tracker,
we really take it seriously.
So if you have a good feature request like that, search for
the Maps API Issue Tracker, add it in.
The more people who star it, such as Transit, then the
harder we work to get it out to you guys.
So I see your question now.
It was a really good one.
AUDIENCE: Hi.
I was wondering if there's any plans or info on if the
traffic data will be available through the API?
I know there's a Traffic layer.
But if you could just get access to the raw traffic
data, without the Map layer.
NABIL NAGHDY: Right now, that's probably not in the
cards, to just give just the amount of traffic of--
AUDIENCE: Yeah, if you could give it a certain geo area and
get the traffic for--
NABIL NAGHDY: Most probably, not.
AUDIENCE: OK, thanks.
AUDIENCE: So you talk about styling for Maps.
Can you do this on the Android Maps?
NABIL NAGHDY: Good question.
Right now, you can do it-- if you're obviously in the
browser, the JavaScript itself would be restyled.
But in App, using WebView or iOS using WebKit, no.
AUDIENCE: OK.
All right, thanks.
AUDIENCE: Hello, this is Ho Ming from Hong Kong.
Two quick questions.
First, you showed about the Elevation API and then got
some red lines depicting the elevation.
Can I change the color or change the style of such path?
JOSH LIVNI: Yeah.
I kind of skipped over that part because there was a
session earlier on the Spatial Data Visualization.
I think all these sessions are going to be live, at the end
of the day, on YouTube, that you can check out.
And Enoch there went into some really great detail on exactly
how he created the symbols along that polyline and all of
the symbology options that you can apply
to markers and polylines.
So the short answer is, yes, absolutely.
You can change those dynamically, set the color
stroke, all of these different things, a
super flexible library.
I don't want to show the code and kind of
repeat a previous session.
But it's live.
And I think the documentation, if you want
to see the new symbols.
Or for that particular example, check out the YouTube
video of the Spatial--
AUDIENCE: And another quick question is on the Transit
information, because I have recently entered San Francisco
and found the transit information really useful.
But for Hong Kong, the transit information
seems not too accurate.
Is there any way that we, as a user of the Google Maps and
[? key ?] user, can help improve some data or the tour
information?
NABIL NAGHDY: Report a Problem, those are actually
quite frequently used.
And they're really valuable to us.
So if you see something wrong--
for example, if you go to maps.google.com, and you
search for transit directions in Hong Kong, if you see
something is incorrect, if you click Report a Problem and
say, this station is in the wrong place, or these are the
wrong times, then that will then go to a team which will
actually look to implement that.
And if it's either, A, something wrong with the way
we're using the data, or, B, faulty data, we'll find the
source of the problem, and then try and fix it.
And then, whatever is on maps.google.com is
mirrored in the API.
AUDIENCE: OK.
Thank you.
NABIL NAGHDY: Yeah.
AUDIENCE: Hi there.
It's for the Distance Matrix.
You said there was different methods of transit.
Can you go across continents?
Like, I'd say, by boat, airplane, or something, with
the Distance Matrix?
JOSH LIVNI: No.
So you can use driving, walking, and if you're in the
United States or Canada, bicycling.
And those are the only modes of transit available.
And you cannot drive, walk, or bicycle across the ocean.
NABIL NAGHDY: If you were, for example, in Spain, and you
were to, say, get Distance Matrix from Spain to Russia,
wherever we can normally return a directions
request, then yes.
But across continents, we don't do cross vehicle.
JOSH LIVNI: But I think your question was maybe, like,
airline data.
Could that get fit in?
AUDIENCE: Airline or boat data or--
JOSH LIVNI: That is a really interesting feature request.
But no.
Right now, it's just limited to the same
three travel modes.
NABIL NAGHDY: And it's also adding things like planes and
things like that to Directions Request itself, which
currently isn't available.
AUDIENCE: All right, thanks.
AUDIENCE: Yeah.
The Distance Matrix was very cool.
Do you have anything that would help people implement a
walk score, which is--
JOSH LIVNI: Yes.
So the Places API, combined with the Distance Matrix, you
might use something--
I think what you're asking is getting to the point I
mentioned earlier of approximate density of things
that are around you, in a given area.
But of course, if you're on one side of the river and all
the density is on the other side of the river, and there's
no bridges nearby, that's not really useful.
So could you figure out what are the closest places, as the
crow flies, as we say in the States, and then, also use the
Distance Matrix to assign the travel time,
by different modes?
So if you're just a bicycling person, you might get
different weightings for different places.
And absolutely, yeah, it's a great use for that.
AUDIENCE: Thanks.
AUDIENCE: Hi, quick question about the usage of Google Maps
and the API on Android.
So you basically said that all of these things are available
on Android, using the standard browser or via Chrome.
But I found it, from a user experience, to be kind to
lacking, as opposed to the desktop experience.
Now, Android has this MapView native component.
But that obviously doesn't work with the Google Maps API.
So what is the kind of approach?
Given the fact that more and more people are starting to
use smartphones, tablets, what is the role of Google Maps in
that respect?
NABIL NAGHDY: That's a very good question.
Right now, we are kind of promoting the use of--
I guess, for native applications, you
would access WebView.
Through the web, you'd access the JavaScript.
I'd say--
that's a very good question.
JOSH LIVNI: It would really just depend a lot on your
application, depending on the amount of data you're loading,
if it's super important that you have
an immediate load-time.
We realize there's an additional lag.
Obviously, you're going to be loading the JavaScript library
if you go through the Maps API.
On the other hand, you get a bunch of new features.
So the focus today was on the new features of the Maps API.
We don't have anything new to announce, right now, about the
other options that you might have natively.
So it's kind of just a tough call for you, that makes the
best sense for your application.
AUDIENCE: Right, OK.
Thanks.
NABIL NAGHDY: Good answer.
AUDIENCE: Can you make some comment about the library.
You mentioned a Store Location library versus a Fusion Table
and versus the Vector API, which you are about to release
very soon, later this year.
The way you use it-- and I know Fusion Table is mainly
for small business.
What about the library you mentioned?
JOSH LIVNI: Yeah, so the Store Locator library-- the point I
was trying to make when I was loading up the houses there
with the Static Data Feed--
and it could also potentially be a dynamic
feed, such as a database.
It's that it could be arbitrary database.
The Store Locator library is completely agnostic, regarding
where you're loading your data from.
It doesn't care at all.
And we make it pretty easy to be very pluggable with
different data sources.
A kind of a separate question from the Store Locator library
is, what's the best spatial database of choice.
If you're an enterprise customer, looking for certain
sort of features, more consumer, looking for a
different set of features, you run your own MySQL database
in-house and so forth.
It's kind of a separate question of what best fits
your needs.
But this particular example was just a lot of people have
a spreadsheet for a couple of hundred stores.
Or they might have a MySQL instance already up and
running, that they're doing all their stuff in with a
million places.
And we don't care at all with the Store Locator library.
Just plug it right in.
AUDIENCE: Do you have any kind of capacity?
What's the size of data it can host, the library?
JOSH LIVNI: Oh, yeah.
So the static data feed, you're basically loading all
the data at once.
So by the time you're loading a few thousand things, you
have kind of bandwidth issues, as a bunch of data you have to
load and then parsing time.
And so, if it's a static data feed, I would say, less than a
couple thousand, depending on the browser,
maybe 1,000 or less.
Otherwise, go for a dynamic data feed, something that you
can request a smaller subset at a time.
It very much varies, if you're going to be on the desktop or
mobile, bandwidth and so forth.
But general rule of thumb, I like to think, although you
can certainly do more, tens of thousands of markers sent
over, why send over more than 1,000 at a time if someone is
only going to look at 10?
It doesn't make sense.
AUDIENCE: So pretty much it's the same
range of Fusion Table?
JOSH LIVNI: Yeah.
AUDIENCE: OK, thank you.
AUDIENCE: Hi.
With Dart coming out, how seamless do you see the
transition being between Dart and JavaScript, as far as
these APIs go?
JOSH LIVNI: So as far as these APIs go, we don't have any
Dart-specific plans.
As far as the really good general question of JavaScript
and Dart, there's a whole series of Dart sessions, where
they're focusing just on that.
And they're going to talk a lot about best practices and
exactly that kind of question.
So I'd say, that is probably a better place to go.
I'm not a Dart expert.
AUDIENCE: OK.
AUDIENCE: Can you talk a little bit about interactions
between different layers on the map?
NABIL NAGHDY: Interactions of different layers.
JOSH LIVNI: Such as?
AUDIENCE: Such as, if there is a store and a bunch of people
are checking in at another store, like within five miles
from that, you could do something about that.
JOSH LIVNI: So there's a few answers.
Yes, if you're using the Places API, there's a number
of things you can do, including something that we
call a Check-in.
It's a little bit of a confusing name.
And it kind of, basically, bumps the ranking.
So you have people on your app checking in.
Like, you have a bunch of users.
They're doing some types of events.
And there's a bunch of places being returned.
And they're checking in, through your app.
You can create a posted Check-in, to the Places API,
to that place.
And future users of your app will see that place's
prominence ranked higher.
So if everyone is hitting up one coffee shop through your
app, next person who searches will see that one.
I don't know if that was your question exactly, but that
would be kind of one approach to that.
AUDIENCE: Something a little bit more abstract, like just
if maybe a bunch of things are happening at a certain
location and there also happens to be something else
happening on a certain location, but it's on a
different layer.
How do you have those two interact?
NABIL NAGHDY: As in, if you had something on the Traffic
layer, if you had a bunch of-- like a grid, and then you had
something on the Bicycle layer.
For example, can you combine [INAUDIBLE]?
JOSH LIVNI: Why don't we talk after?
I'm not 100% sure I got your question.
But we might.
And we can talk about it after, just in case there's
any other last-minute questions here.
We're almost out of time.
NABIL NAGHDY: We'll also be at the office hours, as well.
In the Geo--
down there.
JOSH LIVNI: Any other last-minute questions?
OK.
Well, I think we'll wrap it up.
Thanks a lot, guys.
We really appreciate the time.
And yeah, please take advantage of
some of these services.
They're really simple, add a lot of value to your maps.