Hello, in this video, I will show you how to customize Google Maps in Android.
Customizing Google Maps on Android
Learn how to style and customize how your maps will look.
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 mapstyle.withgoogle.com. Then select to use the old-style wizard option.
With this, we can set how much Roads, Landmarks, and Labels we to be visible on our map.
If we click on “MORE OPTIONS,” we can set the individual components on the map.
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.
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.
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.
In Android Studio, right click on the res folder and go to New > Android Resource Directory.
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.
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.
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.
