It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Using Cloud-based Map Styling (Beta)

One of the Google Maps Platform Maps customization features, cloud-based map styling provides a variety of tools that make it easy to create, customize, publish, and manage your dynamic or static maps using the Google Cloud console. With cloud-based map styling, the customization of your maps is controlled from the Google Cloud console using Map IDs and Map Styles.

A Map ID is a unique identifier that represents a single instance of a Google Map.

A Map Style is a unique identifier that represents a set of customizations that can be associated with any Map ID.

In the Google Cloud console you can create and edit Map Styles and Map IDs, and change the Map Styles associated with a Map ID at any time. This gives you increased flexibility, since you no longer need to update JSON in code in order to change the styling of your map. Simply log in to the Google Cloud console, and update or edit the Map Style associated with a Map ID you want to change.

To use cloud-based map styling, do the following:

  1. Create a Map ID
  2. Create a Map Style
  3. Associate a Map Style with a Map ID during the Map Style creation process, or update/change it at a later time.
  4. Install the Maps SDK for Android Beta
  5. Add your Map ID to the existing MapFragment

Identity and Access Management (IAM) Role

To create or manage any Map IDs or Map Styles in your Google Cloud project, you must have the Project Owner or Project Editor IAM role.

Map IDs

Create a Map ID

To create an ID for your map, select Map Management in the Google Cloud console to open the Map Management screen. The Google Cloud console displays a list of the existing Map IDs. Then select Create New Map ID.

Create New Map ID

On the Create New Map ID screen, specify the following:

  • A name for the map.
  • A map type or platform, either Static, JavaScript, Android, or iOS.
  • Whether the map is a raster or vector map (JavaScript only).
  • A map style associated with the map, or Uncustomized.
  • A description of the map.

Then select Next.

Specify Map Details

The Google Cloud console displays the new Map ID and gives you the option of managing your Map ID.

Complete ID Creation

Add a Map with a Map ID to your app

Install the Maps SDK for Android Beta

Maps customization features are not yet available in the Google Play Services Maps Library. To test them, use the standalone Beta Maps SDK for Android.

For instructions on how to download the beta SDK, see Installing Maps SDK for Android v.3.1.0 BETA

Add your Map ID to the existing MapFragment

You can add your Map ID through a <fragment> element in the activity’s layout file, by using the MapView class, or programmatically using the GoogleMapOptions class.

For example, assume you created a Map ID that is stored as a string value named map_id in res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="map_id">YOUR_MAP_ID</string>
</resources>

For maps added through a <fragment> element in the activity’s layout file, all map fragments that should have the custom style must specify the Map ID in the map:mapId attribute:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    class="com.google.android.libraries.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

You can also use the map:mapId attribute of the MapView class to specify a Map ID:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

To specify a Map ID programmatically, pass it to a MapFragment instance using the GoogleMapOptions class:

Java

MapFragment mapFragment = MapFragment.newInstance(
  new GoogleMapOptions()
    .mapId(getResources().getString(R.string.map_id)))

Kotlin

MapFragment.newInstance(
  GoogleMapOptions()
    .mapId(resources.getString(R.string.map_id)))

In Android Studio, build and run your app as you normally would. Custom styles, as configured in the first step, will be applied to all maps with an ID.

Map Styles

Create a Map Style

To create a new style, select Map Styles in the Google Cloud console to open the Map Styles screen, which displays any existing styles. Then select Create New Map Style to open the Create New Style screen.

Create Style

On the Create New Style screen, you can:

  • Select a map style.
  • Associate Map IDs.
  • Customize a map style.
  • Save a map style.

Create Style Options

You can either create a new Map Style from your existing JSON or choose one of our themes to get started.

To create a style in the Google Cloud console, select a basemap and color theme on the New Map Style tab. Then select Next.

Select Style

You can also try out our demo styles by using the following Map IDs:

- 13564581852493597319
- 8015484283503441984

Importing JSON

To import a JSON style, paste your JSON into the text box on the Import JSON tab. Then select Next

Import JSON

Associating Map IDs

Each Map Style can be associated with as many Map IDs as you'd like so a single Map Style can control multiple maps. On the Associate Map IDs pane, simple check any of the Map IDs you want to be styled by your new Map Style. Then select Next.

You can always change the Map Style associated with your Map ID later.

Select Map ID

Using the Style Editor

You can use the Style Editor to customize the map to your specific use case. For example, you can customize the display of different map features, including:

  • Changing the color used to indicate that an area is a commercial corridor.
  • Filtering points of interest according to specific business categories.
  • Specifying how densely points of interest are displayed.

To open the Style Editor, click Customize in Style Editor.

Customize Style

Save and publish

Maps customization introduces two concepts when customizing a map. Saving saves your current changes without making them live for that style. Publishing makes those changes public. When creating a new style, your only option is to Save & Publish, but subsequent edits can be saved without Publishing.

Publish Style

Maps customization adds the style to the Map Styles screen in the Google Cloud console and the list of available styles that you can associate with a map.

View and update style details

In addition to viewing your available styles on the Map Styles screen, you can view the details of each style and update which maps are associated with a style. To view a style's details, select it on the Map Styles screen.

View Style Details

The Map Styles Details screen displays the list of maps associated with the style, and details about each map. You can also customize the style in the style editor, rename or duplicate the style, or delete it.

To update the list of maps associated with the style, select Edit/Add Map IDs.

Edit IDs

You can specify the maps you want to associate with the style on the Add/Edit Map IDs screen. Select Save to save any changes.

Save Updates

You can also associate a map ID with a style on the Map Management section of the Google Cloud console. For more information on Google Cloud console map management tools, see Changing Map Styles associated with a Map ID.

Changing Map Styles associated with a Map ID

Once you have created an ID for your map, you can associate it with a style. To associate a map with a style, first select a Map ID name on the Map Management screen to open the Map Details screen. Then select a map style from the list.

Select Style

Select Save to update the map's styling.

Save Style

You can also associate a map ID with a style on the Map Styles section of the Google Cloud console. For information on creating and editing styles, see Styling Maps with Maps Customization Features (Beta).

Example App

You can find a Java and Kotlin sample application that demonstrates how to style your Android map from the cloud.

Known Issues

Once your app is delivered to customers, custom styles for maps with Map IDs can be updated from Google Cloud console. The new styles will be reflected in your app in a few hours.

To make sure new custom styles show up immediately for testing purposes, clear app data from your test device. For more information on clearing data from your device, see Android Help - Free Up Space.

Note that settings can vary by phone. For more information, contact your device manufacturer.