JOSH LIVNI: Hi, everybody.
Welcome to this week's edition of Maps Shortcuts.
My name's Josh Livni, and this is our first Maps Shortcuts
after Google I/O 2013.
So for those of you who were at Google I/O or maybe
watching it around the world on one of the live streams or
the follow-up videos, I just want to let you know that we
do have a new refreshed look and feel for Google Maps.
So if you go to maps.google.com, maybe you
already have an invitation, maybe you're already in, or
you can request an invitation and see what is really an
amazing experience.
And what I want to talk to you about today is how we're
integrating that into the API for you guys, the developers,
to sort of get the same look and feel all of the new Google
Maps into your websites.
So on our Geo Developers Blog, we have a post outlining a lot
of details which you might find interesting.
The key here is the code, which I'll get into in a
second how you set it.
And there's just a one line piece of code that you can add
to your website.
And what will happen is you get the look and feel of the
new tiles and the refreshed look of the new Google Maps on
your API site.
So before I go into the details there, I also want to
point out a refreshed look and feel we have for our maps site
on developers.google.com.
So if you go to developers.google.com/maps,
you'll see our new page.
Check it out.
It's quite nice.
And the first thing I want to point out is we have a new job
site, so go to the job site here.
We can see if you're interested in working here.
We have a lot of open positions and a lot of super
exciting teams.
Some of them we talked about in some detail, what the teams
are doing, at Google I/O. So check out
those YouTube videos.
And the point here is, if you go through the instructions to
send in a resume packet, following pretty simple
guidelines here, it'll go straight to the Maps team, and
we'll take a look.
It's a little bit different than if you're applying for a
job at Google generally, and it might go to all of the
potential teams, which is also great.
But if you're interested in Maps specifically, check out
this job site.
So the second thing I want to go into is how do you enable
this visual refresh on your site?
And if we go to our documentation here for our
JavaScript API under the Developer's Guide, go to our
basic concepts.
We've added a new section at the top
for the visual refresh.
So you can see on the left and right a slightly different
look and feel between these maps.
I'll get into the details of that a little bit more.
The point here is to enable the visual refresh, all you
need to do is set google.maps.visualrefresh
equals true at some point in your JavaScript before you
instantiate and render the map.
So as long as you set that parameter to be true, we'll
have all of the map tiles and so forth with the new look and
feel for your page, so super easy.
OK, let's get into some of the details of what the
differences are between the old and the new feel.
So here's the new look and feel of my
old hometown of Seattle.
And one thing you'll notice, as I zoom out, this cool site
that our friends at Ubilabs put together.
It's really simple, kind of mouse over, mouse out.
You can see the look and feel of change as you in and out.
So thanks to the Ubilabs guys for that.
I'll just give you a quick example of
some different areas.
If we zoom in, some of the most obvious things we can see
is the water color changes slightly, the icons change.
Overall, the colors are just kind of cleaner, and it's a
more clean look and feel in general.
Some of the other details are--
especially for you guys developing websites, we've
gotten rid of almost all of the shadows.
So if you bring up an info window with the new look and
feel, you're not going to see any shadows below that, and
the code that you have specifically on the shadows
panel will be ignored.
Some of the other things are the default
marker is slightly different.
Obviously, we have new fonts and icons, slightly new
colors, and new controls.
So as I zoom in and out and you look at the controls,
you'll see some subtle differences where we matched,
again, the look and feel of the maps at google.com site.
So a couple other things, just to note, is if you're using
static maps, so you can also use the new
visual refresh look.
So here is the standard static maps, again of Seattle, and if
I just change the URL to add visual refresh equals true,
I'll go ahead and get the new maps.
So go ahead and play around with new look and feel.
We think it's a super nice UI design.
And again, we have some talks at Google I/O you can look at
to see in detail some of the things that went into making
this new tiles.
And the very last thing I just wanted to mention is that
we'll be changing the look and feel by default for you guys.
So right now, you have to manually opt in.
Starting on August 15 when we put out our next version of
the Maps API, this new look and feel will be the default
for our experimental branch.
So if you load your JavaScript with experimental, then we
will be pushing this out to all of you by
default on August 15.
And then three months later when we put out the next
version, it will be the default look and feel for our
default branch.
So mid November, you should expect if you're using our
default branch, you'll also get it.
So we definitely recommend you guys check it out early.
Check out the experimental branch after August.
Or for now, please go ahead and play around with it, give
us feedback.
And we look forward to seeing lots more sites with the new
look and feel.
Thanks a lot, see you guys in a week.