Use Cloud-based maps styling

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 Style.

Create map styles

A Map Style is a set of customizations that can be associated with a Map ID, which is referenced in app code to display the customized map.

To create a new style:

  1. In the Google Cloud Console, go to the Map Styles page.
  2. Select Create New Map Style to open the New Map Style page.

  3. In the New Map Style page, choose one of the following options:

    1. Select a Map Style from one of the available style variations.
    2. Import JSON styling code by pasting your JSON code into the text box on the Import JSON tab.
    3. Select a Map Style customized to emphasize the goals of a specific industry, such as Travel, Logistics, Real Estate, and Retail.
    You can specify additional customizations to map features by selecting Customize in Style Editor. For more information, see Using the style editor.

  4. To name your Map Style and save your changes, select Save.

To use your Cloud-based map style, associate it with a Map ID.

Replace existing hard-coded map styles

If you have existing maps that use hard-coded styling, such as JSON or URL query parameters, you'll want to remove that hard-coded styling before using Cloud-based styling. Styling conflicts can arise when using these hard-coded styles alongside Cloud-based maps styling. Google recommends converting hard-coded styles to Cloud-based maps styling, then replacing the hard-coded styling with Cloud-based maps styling.

You can create a new Cloud-based map style by importing the styling JSON in the Google Cloud Console, then associate the new style with a Map ID. In your code, replace the hard-coded implementation with a Map ID reference.

In your existing code, look for the hard-coded styling in the MapStyleOptions class on Android, the GMSMapStyle class on iOS, the MapTypeStyle styling on JavaScript, and the style parameter on Maps Static.

Update style details

On the Map Styles page, select a Map Style to complete the following actions:

  • Continue customizing or view style details in the Style Editor by selecting Customize style. For more information, see Using the style editor.
  • Rename or edit a description for the style by selecting Edit.
  • Duplicate the style by selecting Duplicate.
  • Delete the style by selecting Delete.
  • View Map IDs associated with the 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.

Examples

Android

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

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

The following 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
  );
}

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}
View example
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); }
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Using a Map Id</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

Maps Static

Need a demo or example here