Use embedded JSON style declarations

AI-generated Key Takeaways

outlined_flag

• Customize the appearance of your maps using embedded JSON style declarations for the default map and selectable map types.

• Style features and elements within the map by creating an array of MapTypeStyle objects defining the desired appearance, with the featureType , elementType , and stylers properties determining specific modifications.

• Utilize the Maps Platform Styling Wizard to quickly generate JSON styling objects, simplifying the process of creating custom map styles.

• Apply styles to the default map by setting the styles property in the MapOptions object during map creation or by using the Map.setOptions method.

• Create styled map types by setting the style array to a StyledMapType object, enabling the addition of custom map styles without impacting the default map types.

Select platform: Android iOS JavaScript

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.

Specify 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

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

Apply 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 Mapin 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.