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:
- Create a Map ID
- Create a Map Style
- Associate a Map Style with a Map ID during the Map Style creation process, or update/change it at a later time.
- Install the Maps SDK for iOS Beta
- 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.
- Xcode 11+
- Be using the Maps Beta framework, or Maps Beta CocoaPod
- Have a working basic
UIViewControllerset 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.
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.
On the Create New Map ID screen, specify the following:
- A name for the map.
- A map style associated with the map, or Uncustomized.
- A description of the map.
Then select Next.
The Google Cloud console displays the new Map ID and gives you the option of managing your Map ID.
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:
- Create a
GMSMapIDwith the Map ID string from Google Cloud console.
- Create a
GMSMapViewspecifying the Map ID you just created.
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
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.
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.
On the Create New Style screen, you can:
- Select a map style.
- Associate Map IDs.
- Customize a map style.
- Save a map style.
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.
You can also try out our demo styles by using the following Map IDs:
- 13564581852493597319 - 8015484283503441984
To import a JSON style, paste your JSON into the text box on the Import JSON tab. Then select Next
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.
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.
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.
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.
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.
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.
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 Save to update the map's styling.
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).
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
If you don't yet have an API key, follow the instructions
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
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
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.