Play services has just received an update to version 9.6.0 and there’s an awesome new addition to it, custom styling for Google Maps 😍 I feel like this has been a long time coming, so I decided to give the documentation a good read to see exactly what we can do with this new feature 🛠

Why should I use this?

Maps can becomes very cluttered for users. All of the roads, rivers, labels, points of interest and more can quickly make it hard to

There are a number of reasons why you may wish to style your maps, such as:

Hiding Points of Interest to free up space on your map

Theming the map to match the colour scheme of your app

Highlighting routes (roads) on the map

Reducing the complexity of the map by removing landscapes

Changing the style of the map based on the time of day

Hide specific map elements that you do not wish to display

The reasons and possibilities are endless, so let’s dive in so you can get started implement this into your app 🙂

Setting the map style

Setting the map style is pretty simple to do within your application. Once you’ve got access to the map instance that you wish to theme, you can simple use the setMapStyle() method to pass in either a JSON string (maybe a value sent from your server or a users preference) or a RAW JSON file from your resources directory. We can then set this like so:

Within this JSON we can declare two main parts of the Google Map component to modify the styling, these are:

Selectors — These are the geographic components on the map that can be styled, such as roads / parks/ rivers. You can also style the labels which are used for these components.

— These are the geographic components on the map that can be styled, such as roads / parks/ rivers. You can also style the labels which are used for these components. Stylers — There are properties which can be used to alter both the colour and/or visibility if elements on the map.

Luckily for us, Google provide a handy tool to create this JSON file 🙌

Using the Google Maps Styling Wizard

Introducing the Google Map Styling Wizard — go check it out, it basically does all of the hard work for us!

We can do a number of things with this tool, such as adjust the density of the roads: