Using Cloud-based Map Styling (Beta)

The following instructions show how to use the Google Cloud console to create, customize, publish, and manage your maps at any time using Map IDs and Map Styles.

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.

Before you begin

Creating Map IDs

A Map ID is a unique identifier that represents a single instance of a Google Map. You can create Map IDs and update a style associated with a Map ID at any time in the Google Cloud Console without changing embedded JSON styling in your application code.

To create a Map ID:

  1. In the Cloud Console, go to the Maps Management page.

    Go to the Maps Management page

  2. Click Create New Map ID, to display the Create New Map ID form.

    Create New Map ID

    In the form, do the following:

    • Specify a map name.
    • Specify a map type or platform.
    • Enter a description of the map.
    • Click Next to display the new Map ID.

Installing Maps SDK for iOS Beta

Maps customization features are currently available 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

Using Map IDs in your application code

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)
self.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.

Creating Map Styles

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

To create a new style:

  1. In the Cloud Console, go to the Map Styles page.

    Go to the Map Styles page

  2. Click Create New Map Style to open the Create New Style page.

    Create Style Options

In the Create New Style page, you can do the following:

  • Select a Map Style from one of the available templates, or import existing JSON styling code by pasting your JSON code into the text box on the Import JSON tab.

    Import JSON

  • Apply styling to a map by selecting map names. A single map style can be applied to multiple maps. You can always change the Map Style associated with a Map ID later.

  • Customize the display of different map features by clicking the Customize in Style Editor button. In the Style Editor, you can:

    • Change the styling of features on a map, such as roads, bodies of water, and commercial corridors.
    • Filter points of interest to specific business types.
    • Specify the display of points of interest density.

    Customize Style

  • Create a name and description to Save and Publish the Map Style. If you associated a Map ID, saving and publishing will make the changes in style customizations for the associated maps public.

Updating style details

On the Map Styles page, you can select a map style to complete the following actions:

  • View style details.
  • Update Map IDs associated with a style.
  • Save style customizations in the style editor without making the changes publicly visible.
  • Publicly publish style customizations in the style editor.
  • Rename, duplicate, or delete a style.

Styles created before September 15, 2020 will not display Google Maps enhanced natural features. To use Google Maps enhanced natural features support for your map styling, you must create a Map Style.

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.