How to Create Styled Google Maps

Yesterday I wrote about Six of the Best Mapbox Styles. Today I thought it might be interesting to look at styling maps with the Google Maps API. While the Styled Maps feature in the JavaScript Map API is nowhere near as powerful as Tilemill or Mapbox Studio it does allow developers to control some design elements of a Google Map, such as defining the colors of map features.


A good example of what can be achieved with the Styled Maps feature is Yarr, Pirate Maps. Yarr, Pirate Maps uses a few clever tricks to create a distinct pirate themed design, complete with animated waves, birds and pirate ships.

The colored map tiles are created using the Google Maps API Styled Maps feature. The styled map is augmented by a few other non-Styled Map features. For example, the paper looking effect is created by using a number of background images and z-index on the map. The animated waves, birds and ships on the map are achieved by using animated gifs as map markers.


If you want to use a styled Google Map then your best bet is probably to start with having a look at styles that have already been created by other users. Luckily a great repository of ready made Google Maps styles already exists.

Snazzy Maps is a collection of different styles for Google Maps. You can browse through the many example map styles on Snazzy Maps by the 'most popular' and 'most recent'. You can also filter the maps shown by a number of useful tags, such as 'dark', 'light', 'two-tone' etc.

Map developers contribute to the repository by adding map styles that they have created themselves. Once you find a map style that you like you can click on its title and grab the style array. Snazzy Maps even provides an option to download a simple example of each style.


If you want to start from scratch and create your own Google Maps style then you can use Google's Styled Maps Wizard. The wizard allows developers to play with the colors and styles of individual map elements and create the JSON code that can then be used with the Google Maps API.

Other, third party, style wizards also exist to help you create your own Google Maps styles. Map Stylr, Think Tank's Custom Google Maps Style Tool and Google Maps Colorizr are all great style wizards designed to help making your own map styles as easy as selecting map features and selecting your favorite colors.

If you want more inspiration for creating your own Google Maps styles then you can also have a look through some of the great map styles previously featured on Maps Mania by using the Styled Maps tag.