7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 Custom Styles

It can get boring looking at the same old map style day in and day out. Fortunately, in this lesson you’ll learn how to customize Google Maps in many different ways.

Related Links

6.1 Custom Styles

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. And 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's 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 JS 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, are 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. We'll create our styles array. Down in the map options we'll 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. And this element type will be the labels. We'll 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 gonna 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 geometry 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 still applying. And the old green color applies to all point of interest places. To get the seas 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 this green 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.highway. Then we can set the geometry for the element type. And we'll 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 gray color. The feature type will be road.arterial. Now we'll set the color to the gray. 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.

Back to the top