Cloud-based maps styling

Select platform: Android iOS JavaScript Web Service

Paid feature: Functionality accessed by adding a map ID triggers a map load charged against the Dynamic Maps SKU for Android and iOS. See Google Maps Billing for more information.

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 Android¹, Maps SDK for iOS, JavaScript, and Maps Static API, not all features will be visible on all platforms.

Before you begin

• Create a map ID
  To use Cloud-based maps styling, your map must be loaded using a map ID.
• Migrate from hard-coded styling
  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

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.

Examples

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;
index.ts

Note: Read the guide on using TypeScript and Google Maps.

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js

Note: The JavaScript is compiled from the TypeScript snippet.

View example

Try Sample

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

---

1. Cloud-based maps styling is not available on Android's Lite mode. ↩