Styling your map

This page shows how to customize your map and change the visual display of elements such as roads, parks, and buildings. Customize your map using the following tools:

  • Cloud-based maps styling (Beta): Use Google Cloud Console to create and manage map styles, and link them to your maps using Map IDs. You can create new styles by using the styling tool or import existing style definitions. Each time you update a style, your webpage will be automatically updated with the changes.

  • JSON style declarations: For every customization change to your map, use embedded JSON style declarations to manually define map styles. Changing these style declarations requires updating client-side code that uses the end user's device to perform operations and update your webpage.

Using Cloud-based maps styling (Beta)

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

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.

Creating Map IDs

A Map ID is a unique identifier that represents a single instance of a Google Map. You can create Map IDs and update a style associated with a Map ID at any time in the Google Cloud Console without changing embedded JSON styling in your application code.

To create a Map ID:

  1. In the Cloud Console, go to the Maps Management page.

    Go to the Maps Management page

  2. Click Create New Map ID, to display the Create New Map ID form.

    Create New Map ID

    In the form, do the following:

    • Specify a map name.
    • Specify a map type or platform.
    • Choose raster or vector image type.
    • Enter a description of the map.
    • Click Next to display the new Map ID.

Using Map IDs in your application code

To create a map with a Map ID in your application code:

  1. Update the script tag:

    <script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&map_ids=MAP_ID&callback=initMap">
</script>

    Replace:

    • API_KEY with the API Key for your project.
    • MAP_ID with one or multiple Map IDs. For example: map_ids=1234 or map_ids=1234,2345

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

  3. Add a Map ID 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'
});

    The function above displays a single map, and only supports listing a single Map ID in the mapId option.

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.

    Go to Map Styles

  2. Click 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.

    Customizations you add to your map style will always take priority over any updates Google may make to your map style.

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

Updating Map Style details

On the Map Styles page, you can select a map style to complete the following actions:

  • Continue customizing or view style details in the Style Editor by clicking Customize style.

    In the Style Editor, if you associate a Map ID with your Map Style, saving and publishing will make the style changes public for the associated maps. Saving style customizations without publishing in the Style Editor will not make the changes publicly visible.

  • Rename or edit a description for the style by clicking Edit.

  • Duplicate the style by clicking Duplicate.

  • Delete the style by clicking 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.

Customizing at different zoom levels

You can customize the style of existing elements at different zoom levels when creating map styles with the style editor in Google Cloud Console.

For example, you can customize the color of water from pink at zoom level 0 to purple at zoom level 10, and associate other customizations with the level of detail you see at the specified zoom. To try out this feature in a sample app, see Map ID with styling.

To make style customizations at different zoom levels:

  1. Open the style editor in Cloud Console. To do this, visit the Map Styles page, and either create a Map Style or update an existing Map Style.
  2. Select a feature in the Feature type submenu to open up the Element type submenu, and select an element you would like to customize.

  3. Check the Customize across zooms checkbox to make customizations at the current zoom level appear in the style editor.

    Once you select the Customize across zooms checkbox, you should see the following:

    • An Add stop: z checkbox that indicates your current zoom level and attaches customizations to the indicated zoom level.
    • A zoom slider bar to modify and select your zoom level. You can adjust zoom levels with map boolean zoom controls, mousewheel, or arrow keys on your keyboard.

  4. When you make customizations in the Stylers submenu, the style editor automatically selects the Add stop: z checkbox, displays a blue dot above the slider, and overrides any inherited styles.

    The blue dot above your slider indicates that changes were made at the selected zoom level. To prevent changes from being saved at a particular zoom level, clear the Add stop: z checkbox (the blue dot turns gray to indicate that changes will not be saved at that level). After clearing the checkbox, the element returns to its inherited style.

    Any customizations you make at a zoom level will update the customizations at the indicated zoom levels and above. For example, customizations at zoom level 10 affect all customizations at zoom levels 10, 11, 12 and so on. The customizations override any inherited styles.

  5. To save your changes, click Save. To make your changes public on the map IDs associated with your map style, click Publish.

Using embedded JSON style declarations

You can apply customized styling through an embedded JSON style declarations to the following:

  • Default map.
  • Map types that a user can switch between within a single map frame.

Specifying styles to features

To apply styles to different features and elements in a map, create an array of MapTypeStyle objects that define how the map should be styled.

The array takes the following form:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {color: ''},
      {visibility: ''},
      // Add any stylers you need.
    ]
  },
  {
    featureType: '',
    // Add the stylers you need.
  }
]

For a list of all available values for featureType, elementType, and stylers, see the JSON style reference.

Maps Platform Styling Wizard
Create custom styles for the Google Maps Platform APIs

Use the Maps Platform Styling Wizard as a quick way to generate a JSON styling object.

Applying styles to a default map

The following shows an example default map styled using light-colored text and icons on a dark background (i.e. dark mode). To see the code sample, go to Styled Maps - Night Mode code sample.

To modify the styles of the default map, set the map's styles property in the MapOptions object to your style array when:

  • Creating your map.
  • Or, when calling the Map.setOptions method.

Changes to labels and roads affect all map types including terrain, satellite, hybrid, and default roadmap types.

Apply styles to a map type

The following shows an added map type called Styled Map in the control at the top left of the map. To see the code sample, go to Styled Map Types.

To create a styled map type, set the style array to a StyledMapType object. Creating a new styled map type does not affect the style of the default map types.

What's next