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 iOS Beta
  5. Instantiate a Map with a Map ID

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.

Requirements

  • Xcode 11+
  • Be using the Maps Beta framework, or Maps Beta CocoaPod
  • Have a working basic UIViewController set to show a GMSMapView. If you don't, follow the instructions here.
  • Have a Map ID from Google Cloud console. For information on how to get a Map ID, see Managing Maps with Maps Customization.

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 iOS Beta

Maps customization features are currently avaialble in the Maps SDK for iOS BETA, which can be installed using Cocoapods or Carthage.

For instructions on how to download the beta SDK, see Maps SDK for iOS v.3.10.0 BETA

Instantiate a map with a Map ID

To instantiate a map using a Map ID, do the folowing:

  1. Create a GMSMapID with the Map ID string from Google Cloud console.
  2. Create a GMSMapView specifying the Map ID you just created.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "<YOUR MAP ID>")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"<YOUR MAP ID>"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

If you are using your own Map ID, you can set your Map ID on Google Cloud console to have a new style at any time, and that style will be reflected on your map view automatically for you and users within about six hours.

If you want to see the changes immediately, you can close out and restart your app by exiting the app, forcing a quit of the app from the recently used apps list, and then reopening it. The updated map will then be visible.

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

Optional Cloud Styling CocoaPod or GitHub demo

Instead of starting from scratch, you can try out our Maps customization demo, which is installed by following the instructions in the Using the Google Maps Beta CocoaPod section.

Alternatively, you can find an Objective-C sample application that demonstrates how to style your iOS map from the cloud here.

Building the Beta demo app

In Xcode, press the compile button to build and then run the current scheme. The build produces an error, prompting you to enter your API key in the SDKDemoAPIKey.h file.

If you don't yet have an API key, follow the instructions here to set up a project on the Google Cloud console and get an API key. When configuring the key on the Google Cloud console, you can specify your app's bundle identifier to ensure that only your app can use the key. The default bundle identifier of the SDK samples app is com.example.GoogleMapsDemos.

Edit the SDKDemoAPIKey.h file and paste your API key into the definition of the kAPIKey constant:

static NSString *const kAPIKey = @"YOUR_API_KEY";

If Xcode prompts you to unlock the SDKDemoAPIKey.h file for editing, choose Unlock.

Remove the following line:

#error Register for API Key and insert here.

Build and run the project.

Maps customization Map Demo

The CloudStyling demo shows how to style the map by using a style set on Google Cloud console.

When the demo application launches, click on the Map Customization demo in the Beta Samples section at the top of the list.

Click on Style Map to see the effect of loading different Map IDs.

You can try adding your own style as well ("Style Map" > "Add a new Map ID"), and see the map update with your custom styled map.