Styling Google Maps [Guide]

Google Maps is a powerful tool that you can use on your website. For starters, it's free and the maps that you produce are really easy to embed. They're also interactive and full of information, so your users can get the most out of them.

One downside with standard Google Maps, however, is that they all look the same. You don't have to have the same template as everyone else, though. It's possible to style your Google Maps using Google's straightforward API to get the map to look the way you want.

Before You Begin

Before you can start styling your Google Map, you need to have one embedded on a Web page. You will also need to load the Google Maps JavaScript API – just make sure you change the YOUR_API_KEY in the code.

A basic page with the API called and a map displayed would look something like this:

And finally the last part of the code is concerned with styling changes of the water on the map from a light blue to a deep blue. Here is this part of the code:

{

featureType: 'water',

stylers: [{: '#0000ff'}]

}

]

The end result is a map that looks much different from the original:

Syntax

As already mentioned, Google Maps are styled using two things—features and stylers. You can see this in the example above:

· Water is the map feature

· The color #0000ff is the styler

This would be coded as follows:

{

featureType: '',

elementType: '',

stylers: [

{hue: ''},

{saturation: ''},

{lightness: ''},

]

},

A full list of map features is available in the Google Maps JavaScript API Reference section, but it should be noted that some categories of map features also have sub categories. We have one in the example above: landscape.natural. The main map feature is "landscape" and the sub-category is "natural"

In addition to this, many map features have elements, referred to above as elementTypes:

· all - selects everything

· geometry - selects elements of the feature based on geometry. For example, the fill or the stroke.

· labels - selects the labels associated with a feature so you can do things like style the text or the fill

Stylers are based around the hue, saturation and lightness model, also known as HSL. If you are familiar with graphic design this concept will be familiar. Hue determines the base color, saturation determines the intensity of the color, and lightness determines the amount of black or white that is shown.

The hue is represented as an HTML hex color. In the example above, the HTML hex color #809f80 is used for the landscape map features.

Saturation is represented by a number between 0 and 100, with 100 being the most intense. Lightness is represented on a similar scale, with 0 being black, and 100 being white.

The Wizard

The number of options and possibilities that you have when styling a Google Map is huge. This can take quite a bit of time to go through, particularly if you are trying to get specific details on things like certain buildings or roads.

The Styled Map Wizard is therefore a great help. You can use it to set up a JSON for the styles of map that you need. All of the features and elements indicated above can be selected, and you can easily apply stylers. It gives you a visual representation as you go so you can check your progress, and, once complete, you can copy it into your website or application.