Usa declaraciones de diseño JSON incorporadas

Selecciona la plataforma: Android iOS JavaScript

Con declaraciones de diseño JSON incorporadas, puedes aplicar diseños personalizados a lo siguiente:

  • Mapa predeterminado
  • Tipos de mapas entre los que los usuarios pueden cambiar en un único marco de mapa

Especifica diseños para los componentes

Para aplicar diseños a diferentes elementos y componentes de un mapa, crea un array de objetos MapTypeStyle que defina cómo se debe aplicar el diseño al mapa.

El array adopta la siguiente forma:

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

Para obtener una lista de todos los valores disponibles para featureType, elementType y stylers, consulta la referencia de diseño JSON.

Asistente de diseño de Maps Platform

Utiliza el Asistente de diseño de Maps Platform como una forma rápida de generar un objeto de diseño JSON.

Cómo aplicar diseños a un mapa predeterminado

A continuación, se muestra un ejemplo de un mapa predeterminado con un diseño de íconos y textos de colores claros sobre un fondo oscuro (es decir, modo oscuro). Para ver la muestra de código, consulta el artículo Mapas con diseños: muestra de código del Modo nocturno.

Para modificar los diseños del mapa predeterminado, configura la propiedad styles del mapa en el objeto MapOptions con tu array de diseño en las siguientes circunstancias:

  • Al crear tu mapa
  • O bien, cuando llames al método Map.setOptions

Los cambios en las etiquetas y las rutas afectan a todos los tipos de mapas, incluidos los de terreno, satélite, híbridos y el mapa de ruta predeterminado.

Cómo aplicar diseños a un tipo de mapa

A continuación, se muestra un tipo de mapa agregado denominado Mapa con diseños (Styled Map) en el control que se encuentra en la esquina superior izquierda del mapa. Para ver la muestra de código, consulta el artículo Tipos de mapas con diseños.

Para crear un tipo de mapa con diseño, configura el array de diseños con un objeto StyledMapType. La creación de un nuevo tipo de mapa con diseño no afecta el diseño de los tipos de mapas predeterminados.