Overview
Google Maps Platform offers Cloud-based maps styling features that make it easy to style, customize, and manage your maps using the Google Cloud Console, letting you create a customized map experience for your users without having to update your apps' code each time you make a style change.
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.
Cloud-based maps styling lets you create and edit map styles for any of your apps that use Google Maps, without requiring any changes to your code once the map ID is in place. All style changes can be done in the Cloud Console, with no coding skills required. Change the appearance and color of many map elements such as roads, buildings, bodies of water, points of interest, and transit routes.
These features include:
- Cloud-based map styling: Rather than styling your map in code using JSON, manage and style your dynamic or static maps in the Cloud Console using map IDs and map styles.
- Vector Map: JavaScript developers can choose to use the same WebGL-accelerated vector-based map that is available on maps.google.com directly in their own web apps.
- Business POI filtering: Five categories of business points of interest can be optionally removed from the map display.
- POI Density Control: The density of points of interest shown on the basemap can be adjusted to show greater or fewer points of interest by default.
While Cloud-based maps styling is available on Maps SDK for Android1, Maps SDK for iOS, JavaScript, and Maps Static API, not all features will be visible on all platforms.
Before you begin
- To create or manage any map IDs or map Styles in a given Google Cloud project, you must hold either the Owner or Editor IAM role on the project.
- All platforms: Before adding a map ID to use Cloud-based maps styling
on an existing map that is customized with hard-coded styling, such as JSON or
URL query parameters, we recommend you remove the hard-coded styling to avoid
potential conflict with future functionality. You can
import your JSON styling into a new map style.
- On Android, update the
MapStyleOptions
- On iOS, update the
GMSMapStyle
class - On JavaScript, remove the
MapTypeStyle
styling - On Maps Static, remove the
style
parameter
- On Android, update the
- Android: To use Cloud-based maps styling, you must be using 18.0.0 or later of the Maps SDK for Android and opt in to the updated Android SDK.
- Create a map ID and add it to your app.
Billing
Using Cloud-based maps styling requires a map ID. On Maps SDK for Android, Maps SDK for iOS, and JavaScript, using a map ID incurs a charge against the Dynamic Maps SKU. On the Maps Static API, using a map ID incurs a charge against the Static Maps SKU.
Demos and examples
Android
Run the ApiDemos sample app
To run the ApiDemos sample app, see the GitHub sample
(Java
| Kotlin)
and view the CloudBasedMapStylingActivity
demo
(Java
| Kotlin).
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.
iOS
Run the ApiDemos sample app
To run the ApiDemos sample app, see the GitHub sample
GoogleMap sample app
and view the CloudBasedMapStylingViewController
project (GitHub sample for
Swift
| Objective-C).
Optional Cloud Styling CocoaPod or GitHub demo
Instead of starting from scratch, you can try out our Cloud-based maps styling 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 these instructions
to set up a project on the Cloud Console and get an API key. When
configuring the key on the 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.
Cloud-based maps styling 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.
JavaScript
This is a basic example of loading a custom styled map using a
map ID. In this case, the Maps JavaScript references
map ID 8e0a97af9386fef
when the map is loaded, and automatically
applies the map style currently associated with that map ID.
TypeScript
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
Try Sample
-
Cloud-based maps styling is not available on Android's Lite mode. ↩