Hi, everyone.
My name is Chris Broadfoot, and I work on the Maps API and
Developer Relations team at Google Sidney.
Unfortunately, it doesn't snow here, but I can live
vicariously through this year's Easter
Egg on Google search.
So this is just a quick screencast to show you how to
use an awesome, powerful feature called Styled Maps.
We released Styled Maps at Google I/O 2010, but I wish I
saw it used more.
It allows you to customize the look of your map's API map to
brand your map, like on this store locator, or to draw
attention to some data you've put on top your map.
Or it can be used to just make your map a
little bit more festive.
To get started, I recommend using the Styled Map wizard to
generate the necessary code to produce your styled map.
The quickest way to get into the wizard is to use your
preferred search engine.
When you load it, you'll see some instructions, but I'll
just show you some of the basics of this tool.
So first of all, let's navigate to Sidney using the
search bar on the top right.
So styling uses two concepts to apply color and
changes to the map.
The first is Map Features, and you can see it represented at
the Feature Type panel of the top.
The second is stylers, which are found below.
These define color using a combination of visibility,
hue, saturation, lightness, and gamma.
So let's make this map a little more festive.
First, let's change the water to red.
I'm going to change the hue, saturation,
and drop the lightness.
You can see these changes come through straight away.
The labels are distracting a bit from this really pretty
map, so let's remove them from all feature types.
When I press the Add button, I can keep adding styles.
Let's then make all of the landscape green using similar
styles to water.
And as you can see, it's surprisingly easy to create
cartographically horrible, or just plain ugly maps.
Parks and roads are the main thing left unstyled, so let's
make the parks green as well, and let's change all the roads
to be white.
Just bring the lightness up.
So Styled Maps are available both in the JavaScript API and
the Static Maps API.
We can bring up a static map by clicking the Static Map
button, and you get a URL down at bottom that you can embed
straight into your application.
We can also press the Show Adjacent button to get the
styles in adjacent array, and we can copy these into our
existing map.
So I'm going to add an option called Styles, and pasting the
styles we generated using the wizard, and you can see
instantly that these styles have been applied.
Styled Maps are really quick.
They're just as fast as a regular Google map.
They're super simple, and you should try it today.
See the documentation for more information.
There's additional features like custom map types, so you
can enable your users to switch between the default map
and other styles you've created.
Thanks for listening and happy styling.
