Twitter LogoFacebook Logo
Customizing Google Maps on Android
Learn how to style and customize how your maps will look.
By: King

Hello, in this video, I will show you how to customize Google Maps in Android. 

To begin, you should have a working Google Maps on your application. If you do not, here is a short article  that shows you how to implement one.

Creating your Own Style using JSON

The Google Maps SDK allow us to customize how the map will look using a JSON file. To make the process easier, there is a tool call Maps Platform Styling Wizard that we can use to preview, test, and generate the JSON file for the map.

Go to Then select to use the old-style wizard option. 

Image from

With this, we can set how much Roads, Landmarks, and Labels we to be visible on our map.

Image from

If we click on “MORE OPTIONS,” we can set the individual components on the map. 

Image from

Let’s say we want to change the color of the water. We would select the “water” menu on the left and then go to fill > color. 

Then we just select the color we want to use for the water.

Image from

We can also make some features stand out more than others. If we just want school buildings to stand out, we can change the color of them on the map.

Image from

In the above example, school buildings are colored in red. 

You can play around with the wizard and maybe come up with something really cool.

Generating JSON

When you are finished styling the map, click on the “FINISH” button at the bottom. A dialog will pop up and we can click on the “COPY JSON” button to get the code for our file.

Image from

In Android Studio, right click on the res folder and go to New > Android Resource Directory.

Image from

Click on the Resource Type dropdown, select raw, and then click on the “OK” button. This will create a folder call raw inside our project.

Image from

Now right click on the raw folder and create a new file. You can give the file any name but make sure to turn it into a JSON file by putting ".json" at the end. 

When the file is created, paste the code you copied earlier inside. 

Image from

Setting the Style of the Map

Once you have the JSON file, you'll need to set it into an GoogleMap object so it’ll use it. 

In the onMapReady() callback, take the GoogleMap object and call setMapStyle(). 

To pass in the JSON file, call loadRawResourceStyle() from MapStyleOptions. 

Then pass in the context and the reference to the JSON file in the raw directory.

That is all for this tutorial. If you find this helpful, give it a like, share, and subscribe to support the channel.

Sign In