Google Maps Platform

Styled Google Maps for Android apps

How to style Google Maps with Cloud Styling

3 min readJun 22, 2020

Styled Google Maps is not a new feature and until recently, we used Styling Wizard to create beautiful and styled maps. Styling Wizard would generate a JSON file that would later be used in mobile apps or on the web.

Google Maps Platform has introduced Cloud Styling (still in beta) feature that would make our life a bit easier when it comes to maps style and design. In this post, we will go through a new way of customising and managing your maps styles.

Let me show you how you can create, customise and use your map style with Google Cloud Console and Android:

Setup in Google Cloud Console

Create a new project in Google Cloud Console or open an existing one
In the navigation menu, select Google Maps -> Overview

3. Select “Map Management” and click on “Create New Map ID”

4. Select “Android” as your Map type and add a unique Map name

Now we have created a Map ID our Android app going to use. The next step is to create a new map style and assign it to our newly created Map ID.

5. Select “Map Styles” and click on “Create new map style”

If you have used Styling Wizard before, this user interface will look very familiar to you.

6. Follow a step by step guide to create a new style. To modify the style, check out the editor to toggle visibility of different features

Now we have created a styled map in Google Cloud Console. You can use this style for iOS and Android apps and also in your web applications. Let’s look at Android app implementation.

Android project setup

Create an Android Studio project and select Google Maps template
Get Google Maps API key. Follow the instructions here

If you are using Android Studio template for Maps project, paste your key in google_maps_api.xml

3. Follow Google Maps v3.1 Beta SDK setup instructions

Add Map Style to your app

Add map_idstring in res/values/strings.xml

<resources>
  <string name="map_id">YOUR_MAP_ID</string>
</resources>

2. Add map:mapId="@string/map_id" in your SupportMapFragment in activity_maps.xml file

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
 android:name="com.google.android.libraries.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:mapId="@string/map_id"
    tools:context=".MapsActivity" />

Want to learn more about Google Maps? Check out this resources: