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

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.

Using Cloud-based maps stylings in your application code

To create a map with a Cloud-based maps styling in your application code:

  1. If you are currently customizing your map with embedded JSON code, remove the styles property from your MapOptions object; otherwise, skip this step.

  2. Add a Cloud-based maps styling to the map using the mapId property. For example:

    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8,
      mapId: 'MAP_ID'
    });

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 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 clicking Customize in Style Editor. For more information, see Using the style editor.

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

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

Example

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