Custom Interactive Maps with the Google Maps API 18 Custom Styles Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

by now you might be bored looking at the
same style map throughout this course
and within Google Maps you can actually
change the styles one of the great
features of Google Maps is that you can
actually change colors of components on
the map and in some cases such as
branding this is really useful the way
that custom styles work within google
maps is that you set up an array of
objects and then set that as the map
style in each one of these objects
corresponds to a component on the map
that you're styling so in this example
we can see that an arterial road is
being styled there is an element type of
geometry which that signifies that it's
going to fill the entire element and
then there stylers where we can change
the hue as well as the core color and
every component that we can style within
Google Maps uses this type of object to
get a detailed list of the components
that we can style we can consult the API
reference we have this list of constants
and this constant represents the
component on the map right here we can
style all the landscape or we can style
just a subset of the landscape the same
holds for point of interest as well as
roads inside of our map options J's file
we have a list of comments that lay out
how we're going to set up our map first
we're gonna remove all the markers and
below that or all the components we're
gonna style and next to each one of the
components is the color that we're gonna
set the geometry color to will create
our Styles array down on the map options
will set the styles to the Styles
property now we'll remove the labels
from the map we'll first select the
feature type and we'll select all
feature types now we'll select the
element type in this element type will
be the labels will set the stylers and
the style we're going to set is the
visibility when we set the visibility to
off we remove all the labels of all
types from the map this shows us that we
can set global styles when we set
feature type to all the next component
we're gonna style is the water for water
we're going to style the geometry and
geometry just means the fill of the
object within our stylers we'll just set
a color now we have a much more rich
blue on our map now we're gonna change
the landscape color just like above
we're gonna set the element type to
three to color the fill within the
stylers array we're gonna change the
color as well we can see in some places
that we have this different color green
but the old green is still applying in
the old green color applies to all point
of interest places to get to sees the
styles we wanted to use we can set the
styles for the feature type of point of
interest
now within stylers if we set the color
to the green above it'll all match as
one solid green
now that our map is mostly a solid green
we can see some of these places where
that's not matching right here we see
this gray area and this is the San
Francisco Airport this means we have to
style all transit options to match the
screen as well if we want it to be a
completely solid block of green now all
the transit styles are the same green
color as well the next thing to do is to
change the highway color to change the
highways we have to set the feature type
to road on highway then we can set the
geometry for the element type and will
now set the color now our highways are
this dark blue to provide contrast to
this dark blue we want to set our main
roads to have a grey color the feature
type will be Road arterial now we'll set
the color to the grey and now when we
scroll out
we have a flat and solid colored map so
it's really easy to set your own custom
styling with Google Maps and this is a
really basic example as well within the
documentation you'll find more specific
components that you can style as well