Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Styling a Map

A great thing about the Google Maps API is the flexibility it gives us to customize our map. In this lesson, we’ll style the map we created previously.

Related Links

2.2 Styling a Map

Hello everyone, I am Reggie Dawson. Welcome to the Use the Google Map API course for Tuts+. In this video, we will learn the options we have for styling our maps. After that, we will learn to apply these styles to customize the map we created in the last video. Using the Google Map API we can create any kind of map we need. Later in the course, we will look at the ways we can draw on our map. Some companies have used this functionality to build unique experiences with the Google Map API. Before we get to that we will first learn to change the style of our map to give it a custom look. The API gives us a way to change every aspect of the look of our map. Chances are you have seen these changes in action. If you have ever used your phone and navigate at night, you may notice that your phone will drop into night mode. This is not a new map, just a change in the styles of the map. In order to change our map styles, all we have to do is add a styles option to our map options. These styles will be added in a JSON format. If you look at the documentation for the map styles, we can learn a little bit about the format of these styles. Now the style declaration we're going to add can have three elements. The featureType represents any features that are in our map. We can use these featureTypes as selectors in our styles. The all selector allows you to choose all features and apply the same styles. Administrative is for land parcels such as states and countries, landscape is for land, poi is for any points of interest. Roads are for all types of roads, while transit is for different transit elements, such as airports, trains and buses. Water is for all bodies of water. Each feature will in turn have elements that we can use to apply styles to our features. The all element will apply the all elements of the feature. The geometry element selects the geometric element of the feature. For example, if we are choosing roads, this affects the look of the road on the map. The geometry field is the style of the road itself. The geometry stroke is the color of the outline of the road. We also have the label element where we can apply style to the labels that go with our feature. We can set an icon for the label, set the text style, the label fill, and the label stroke. Then finally, we have the stylers, which actually allow us to apply styles to our elements. The styles that we can apply are hue, lightness, saturation, gamma, invert_ligthness, visibility, color, and weight. I won't go deeply into what they all do, but you can look over the styles in the documentation for more info. Now it may be a bit confusing what I just explained, so let's add some styles to our project. Open up the map that we created in the last video. We can also launch the preview as we will check out what the changes do as we add each style. First, we will add a styles array through our mapOptions, then, we will add our first style. Now you may notice that we don't have a feature type in this style. Instead of using all, I will use an element by itself to apply style to a specific feature. In this case, I'll apply this field to all geometries. Go ahead and save the file and take a look at it. All of the landmass of the map is now this dark color. This is how we can affect the entire map with one style without using the all element. Next we are changing the color of the outline of the geometry. Now if you save and preview, you will see everything outlined in green. Then we add styles to change the outline and fill color of all the text on the map. Now understand, we could have changed the label for each feature if we liked. We could have also changed the geometry for each element by itself. Since this is a simple example, we will use universal label styles. On the other hand, we set the geometry color of everything, just so it's more obvious as we style each feature. Then we add a fill for the water. This will set the color of all the bodies of water on the map. Now, as you can see, all of our water has been set to blue. Then we add a stroke for the administrative areas. Again, these are areas like land parcels, counties and states. You may not be able to see the effect this has unless you zoom out. Now you may have noticed that we just added one element type for the first two examples. In the case of landscape, I added both the fill and the stroke. Now this will color our land for us but if we zoom out, We will still see some areas that haven't been affected. That is because they belong to another feature. Then if we add a fill for the point-of-interest feature, and then zoom out, We will see that a lot of these areas not affected by the landscape styles are now colored in. That lets us know these were point-of-interest areas. Then we add our styles for our roads. Now you may notice that some roads are outlined with the stroke style, while smaller roads have no outline. This is just some individual styling to designate what type of road it is. Major roads and highways are outlined while smaller streets just have the fill color. Then finally, we add our styles for the transit features. This will style the features for trains, buses and other public transportation. If we zoom out, We can see that the rest of the areas that were unchanged have now been filled in. You should now know how to style your Google Maps. Make sure to look over the documentation for an idea of the things you can style and how complex you can make your maps. In the next video, we will learn how to use JavaScript to display a street view.

Back to the top