[MUSIC PLAYING]
ANKUR KOTWAL: You've got a great brand,
and you want everything on your app or site to match it.
With custom styling, you can change the look of your maps
to suit your needs.
Hi, I'm Ankur Kotwal.
And in this episode, I'm going to show you
how awesome the Google Maps API custom styling is.
We'll also look at a new tool to help
you create your own styles.
So let's start off by looking at what custom styling is.
So here is a normal Google map.
It looks cool in the daytime, but here's
how it could look at night.
Now, let's say you have an app that's used
for tracking bicycle rides.
And in that use case, providing a great experience
in the evening is just as important as the daytime.
Wouldn't it be great to have the app automatically
switch to the Night theme on the map at the appropriate time?
Now, when we saw that happen, it's
important to see that that style was applied to the map
instantly.
We didn't need to tear down and rebuild the map.
It just immediately adjusted to the new style.
Custom styling puts you in control of the colors that
are used in the map.
You can use this to enforce your branding,
to match your taste in colors, or focus
on what's more important.
You describe a custom style using JSON.
And you only have to do it once, because the same style
format is supported across the web, Android, and iOS.
Now, since it's just a JSON file,
you can store it where you'd like.
It can ship with your app, or you can download and apply
the style dynamically at run time.
So how do you create a custom style?
Well, some developers will tell you
that you should create these JSON files in Vim, Emacs,
Sublime Text, so whatever your favorite text editor is.
And you could.
But for those of us that want something more visual,
we've created a Styling Wizard for you.
The Styling Wizard is available at this URL,
and it's a tool that makes it easy to build your own custom
map styles.
Now, what we've done here is group the styling options
into logical categories.
And when you change these values,
the Styling Wizard reflects that change immediately.
What's cool is that the Styling Wizard includes a few default
styles.
The Night style is useful for those evening use cases,
like our bike ride app.
And Silver is great if you want to provide
a subtle or toned-down look.
But my favorite by far is the Retro style.
So once you've created your style with the Wizard,
you're going to want to apply it.
Now, we're going to look at a few code snippets
to show you how easy it is to apply the styles
across all three platforms.
Let's start with the web.
To modify the styles of the default
map types, set the style array in the Maps MapOptions,
either at the time of construction
or by calling map.setOptions.
On Android, to style your map, call
googleMap.setMapStyle and pass in a MapStyleOptions object.
That's going to contain your style declarations in the JSON
format.
You can also load the JSON from a raw resource or a string.
On iOS, to apply custom map styles to the map,
call GMSMapStyle to create a GMSMapStyle instance.
You can pass in a URL for a local JSON's file
or a JSON string containing style definitions.
Then just assign the GMSMapStyle instance
to the MapStyle property of the map.
Earlier, I stated that you can use custom styles
to focus on what's important.
Let me explain what I meant by that.
Custom styling allows you to hide labels,
or vary road density, or even toggle points of interest.
And the way you do this is by tweaking the style
options in the Styling Wizard.
What we do is click More Options, select a category,
and then tweak as appropriate.
You can also use the predefined styles as a starting point
and then create your own unique map style.
So there you have it.
Custom styles are a great way to tailor your maps
to your unique taste and brand.
The Styling Wizard makes it easy to create custom map styles,
and then you can apply them just as easily
at run time on the web, Android, and iOS.
To learn more, check out the docs at this link.
And to get started, check out the sample code here.
Share your styled maps with the hashtag #mapstyle.
We're looking forward to seeing your styles.
Thanks for watching.