How to add custom styling a Static Google Map

Google Map Highlighting Bus Stops

In order to style your static Google Map, you have to specify styling rules that will direct the Google Maps API to style your map. Google Maps gives developers a wide range of different options to customize the map the way you would like. In order to specify the different the exact customizations you would like to make to your map, you add one or more style parameters. There are three main parts of the style parameter: feature, element, style rules. These three parts are separated by a pipe character (|). Here is an example of the format and set of arguments for the style parameter:

style=feature:feature_argument|element:element_argument|rule:rule_argument|rule:rule_argument

Next, we will break down these three parts to give you an understanding of all the different options available to make your Google Map exactly how you want it.

Feature argument in the style parameter

The feature argument allows you to select which feature such as road, water, landscape, etc. on your Google Map to stylize. If you wanted to make the water on your map red, you would first specify water in your feature argument, style=feature:water|.... Or, if you wanted to highlight bus stop icons on your map, you would first specify the bus stop in your feature argument, style=feature:transit.station.bus|.... Your style parameter does not include the feature argument, the styles that you customize will apply to all features.

To view all possible feature arguments, visit the feature argument section in the Google Maps API Documentation

Element argument in the style parameter

The element argument allows you to specify which element(s), such as labels, geometry, etc., of your specified feature you would would like to stylize. If you wanted to stylize the fill color of your water on your map, you would specify your style parameter like so, style=feature:water|element:geometry.fill|.... If you wanted to highlight the bus stop icons on your map, you would specify your style parameter like so, style=feature:transit.station.bus| element:labels.icon|.... Your style parameter does not include the element argument, the styles that you customize will apply to all elements of your specified feature.

To view all possible element arguments, visit the element argument section in the Google Maps API Documentation

Rules argument(s) in the style parameter

The rules argument where the styling is applied to the feature and element that were specified in the first two arguments. Some examples of rules you can specify include, the ability to change color, with rules like color, saturation, hue, the ability to adjust the visibility of certain features and elements with the visibility rule, and the ability to change the weight of certain features or elements with the weight rule You are able to specify multiple rules arguments within each style parameter as shown in the example style parameter outline above. To complete the water example, we need to add a rule argument to specify the color red, style=feature:water| element:geometry.fill|color:0xff0000. To complete the bus stop example, we need to add a rule argument to specify the hue of all bus stop icons the map, style=feature:transit.station.bus|element:labels.icon|hue:0xff0000.

To view all possible rule arguments, visit the rules argument section in the Google Maps API Documentation

Written By

Michael Williamson

I am a full stack web developer, digital strategist, and occasional content writer living in the city of Northeast Minneapolis, Minnesota.