Versión 3 del API de JavaScript de Google Maps

Mapas con estilos

  1. Descripción general
  2. Sintaxis de estilo
    1. Recursos del mapa
    2. Modificadores de estilos
    3. Ejemplo del conjuntos de estilo
  3. Cómo cambiar el estilo del mapa predeterminado
  4. Cómo crear un objeto StyledMapType
  5. El asistente para mapas con estilos

Descripción general

Los mapas con estilos te permiten personalizar la presentación de estilos de mapas base de Google estándar, cambiando la visualización de elementos como carreteras, parques y áreas urbanizadas que reflejen un estilo diferente al utilizado en el tipo de mapa predeterminado.

A continuación se indican las dos formas de aplicar estilos a un mapa:

  • Puedes establecer la propiedad .styles del objeto MapOptionsdel mapa. Este método cambia el estilo de los tipos de mapa estándar (las imágenes de base de la vista de satélite y de la vista de relieve no se ven afectadas, pero las carreteras, las etiquetas, etc. respetan las normas de estilo). Cómo cambiar el estilo del mapa predeterminado

  • Puedes crear y definir un objeto StyledMapType y aplicárselo al mapa. Esto crea un nuevo tipo de mapa que se puede seleccionar en el control de tipo de mapa. Consulta la sección Cómo crear un objeto StyledMapType.

Ambos métodos toman un conjunto de objetos MapTypeStyle (todos están compuestos por selectores y modificadores de estilos). Los selectores especifican los componentes de un mapa que se deben seleccionar para aplicarles un estilo, mientras que los modificadores de estilos permiten definir las modificaciones visuales que se aplicarán a tales elementos.

Sintaxis de estilo

Los mapas con estilos utilizan dos conceptos para aplicar colores y cambios a un mapa:

  • los recursos del mapa son elementos geográficos que se pueden señalar en el mapa (incluyen carreteras, parques, masas de agua, etc., así como sus etiquetas),
  • los modificadores de estilos son propiedades de visibilidad y color que se pueden aplicar a los recursos del mapa (definen el color que aparece mediante una combinación de valores de gamma y luminosidad, color y matiz).

Los modificadores de estilos y los recursos del mapa se combinan en un conjunto de estilo, que se transmite al objeto MapOptions del mapa predeterminado o al constructor StyledMapType. El conjunto tiene la siguiente forma:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

A continuación, se explican sus componentes.

Recursos del mapa

Un mapa incluye un conjunto de recursos, como una carretera o un parque, especificados a través de un objeto MapTypeStyleFeatureType. Los tipos de recursos forman un árbol de categorías, cuya raíz es all. La lista completa de recursos que se puede seleccionar dentro de un mapa se incluye en el documento de referencia de la versión 3 del API de JavaScript de Google Maps. Al especificar el recurso como all, se seleccionarán todos los elementos de mapa.

Los recursos se especifican mediante la sintaxis featureType: 'feature'.

Por ejemplo:

{
  featureType: "road"
}

Algunas categorías de tipos de recursos incluyen subcategorías que se especifican separadas por puntos (por ejemplo, landscape.natural o road.local). Si se especifica el recurso principal (por ejemplo, road) los estilos aplicados a esta selección se aplicarán a todas las carreteras, incluidas las subcategorías.

Asimismo, algunos recursos de los mapas contienen diferentes elementos. Por ejemplo, una carretera incluye no solo la línea gráfica (geometría) que la representa sobre el mapa, sino también el texto que indica su nombre (etiquetas). Los elementos de los recursos se seleccionan especificando una categoría de tipo MapTypeStyleElementType. Se admiten los siguientes tipos de elementos:

  • all (predeterminado): selecciona todos los elementos del recurso.
  • geometry: selecciona solamente los elementos geométricos del recurso correspondiente.
    • geometry.fill: selecciona solo el relleno de la geometría del recurso.
    • geometry.stroke: selecciona solo el trazo de la geometría del recurso.
  • labels: selecciona solo las etiquetas de texto asociadas a un recurso concreto.
    • labels.icon: selecciona solo el icono que se muestra en la etiqueta del recurso.
    • labels.text: selecciona solo el texto de la etiqueta.
    • labels.text.fill: selecciona solo el relleno de la etiqueta. El relleno de la etiqueta se muestra generalmente como un contorno de color que rodea el texto de la etiqueta.
    • labels.text.stroke: selecciona solo el trazo del texto de la etiqueta.

La siguiente especificación selecciona las etiquetas de todas las carreteras locales:

{
  featureType: "road.local",
  elementType: "labels"
}

Modificadores de estilos

Los modificadores de estilos son opciones de formato de tipo MapTypeStyler que se aplican a los recursos del mapa. Actualmente se admiten las siguientes opciones de MapTypeStyler:

  • hue (una cadena hexadecimal RGB) indica el color básico.
  • lightness (un valor de punto flotante entre -100 y 100) indica el cambio porcentual en el brillo del elemento. Los valores negativos incrementan la opacidad (-100 corresponde al negro) mientras que los valores positivos aumentan el brillo (+100 corresponde al blanco).
  • saturation (un valor de punto flotante entre -100 y 100) indica el cambio porcentual en la intensidad del color básico que se debe aplicar al elemento.
  • gamma (un valor de punto flotante entre 0.01 y 10.0, donde 1.0 no aplica correcciones) indica la cantidad de corrección gamma que se debe aplicar al elemento. Los valores de gamma modifican la luminosidad de los matices de una forma no lineal sin afectar a los valores de blanco o de negro. Los valores de gamma se suelen utilizar para modificar el contraste de diferentes elementos. Por ejemplo, podrías modificar el valor de gamma para incrementar o reducir el contraste entre los bordes y el interior de los elementos. Los valores bajos de gamma (<1) incrementan el contraste, mientras que los valores elevados (>1) disminuyen el contraste.
  • inverse_lightness (si se establece como true) invierte la luminosidad existente. Es de utilidad, por ejemplo, para cambiar rápidamente el texto de un mapa más oscuro a color blanco.
  • visibility (on, off o simplified) indica si un elemento aparece en el mapa y la forma en que se muestra. Una visibilidad simplified elimina algunos recursos de estilo de los recursos afectados, por ejemplo, las carreteras se simplifican en líneas más finas sin contorno, mientras que los parques pierden el texto de su etiqueta aunque conservan el icono de etiqueta.
  • color (una cadena hexadecimal RGB) indica el color del recurso.
  • width (un valor entero mayor o igual que cero) establece el ancho del recurso en píxeles. Si estableces el ancho en un valor mayor, es posible que se recorten los bordes cercanos al mosaico.

El color de un recurso se puede establecer en un único valor color o se puede modificar combinando hue, saturation y lightness. Estas propiedades constituyen dos métodos diferentes de representar el color, pero es posible combinar ambos métodos. Por ejemplo, puedes establecer un color y, a continuación, modificar la saturación y la luminosidad para oscurecer el mapa cuando se muestre un cuadro de diálogo. Para obtener más información sobre los modelos de colores, consulta la documentación correspondiente al modelo de luminosidad, saturación y matiz.

Las reglas del modificador de estilos se aplican en el orden en el que aparecen en el conjunto MapTypeStyler. No combines varias operaciones en una única operación de estilo. En su lugar, define cada operación como una entrada independiente del conjunto de modificadores de estilos. El orden es importante, ya que algunas operaciones no se pueden conmutar. Las funciones y los elementos que se modifican a través de operaciones de estilo (normalmente) ya disponen de estilos existentes, por lo que las operaciones actúan sobre dichos estilos, si existen.

El modelo de luminosidad, saturación y matiz

Ten en cuenta que utilizamos el modelo de matiz, saturación y luminosidad (HSL) para definir el color dentro de las operaciones de los modificadores de estilo. Las operaciones de definición de color son habituales en el diseño gráfico. El matiz indica el color básico, la saturación la intensidad de ese color y la luminosidad la cantidad relativa de blanco o negro del color constituyente.

Aunque el matiz (hue) utiliza un valor de color hexadecimal HTML, solo lo usa para determinar el color básico, no para definir la saturación o la luminosidad, que se indican aparte como cambios porcentuales.

Los valores hue RGB están formados por partes iguales de rojo, verde y azul, como "#000000" (negro) y "#FFFFFF" (blanco) y todas las escalas puras de grises, y no indican ningún matiz, dado que ninguno de estos valores determina una orientación en el espacio de coordenadas HSL. Para especificar negro, blanco o gris, debes eliminar toda la saturación (saturation) (establece el valor en -100) y ajustar la luminosidad (lightness) en su lugar.

Asimismo, cuando se modifican recursos existentes que ya disponían de un esquema de color, cambiar un valor, como hue, no modifica la saturación (saturation) o la luminosidad (lightness) existentes.

Ejemplos de modificador de estilos

A continuación, te indicamos cómo hacer que un recurso aparezca en azul brillante:

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

A continuación, te indicamos cómo hacer que un recurso aparezca en verde brillante mediante un único valor RGB:

stylers: [
  { color: "#99FF33" }
]

A continuación, te indicamos cómo eliminar todos los colores de un recurso, independientemente del color que tuviera en un principio:

stylers: [
  { saturation: -100 }
]

Esto es lo que debes hacer para ocultar un recurso por completo:

stylers: [
  { visibility: "off" }
]

Ejemplo de conjunto de estilo

Las reglas de los modificadores de estilo y de los selectores de recursos de mapas se combinan en un conjunto de estilos. No hay límite en el número de recursos que puede contener un único conjunto.

En el siguiente ejemplo, todos los recursos del mapa se ponen de color gris y la geometría de la carretera arterial de color azul y, además, se ocultan por completo las etiquetas de los negocios:

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Cómo cambiar el estilo del mapa predeterminado

Para modificar los estilos del tipo de mapa predeterminado (los cambios en las etiquetas y en las carreteras también afectarán a los mapas de satélite y a los mapas de relieve), establece el conjunto de estilos en el objeto MapOptions del mapa (puedes hacerlo al crear el mapa o ejecutando setOptions).

En el siguiente ejemplo se muestra cómo reducir la saturación en todos los recursos e inhabilitar etiquetas en las carreteras.

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

Para obtener información sobre los elementos del mapa cuyo estilo se puede modificar, consulta la secciónRecursos del mapa y para saber cómo aplicar los colores y los efectos, consulta la sección Modificadores de estilos.

Cómo crear un objeto StyledMapType

Puedes crear un nuevo tipo de mapa al que aplicarle estilos. Para ello, crea un objeto StyledMapTypey transmite la información del modificador de estilos y del recurso al constructor. Este método no afecta al estilo de los tipos de mapa predeterminados.

Para crear un nuevo tipo de mapa:

  1. Crea un conjunto de estilos. Consulta las secciones "Recursos del mapa" y "Modificadores de estilos" para obtener instrucciones.
  2. Crea un nuevo objeto google.maps.StyledMapType trasmitiendo el conjunto de estilos, así como un nombre para el nuevo tipo de mapa.
  3. Crea tu objeto de mapa y, en las opciones del mapa, incluye un identificador para el nuevo tipo de mapa en el conjunto mapTypeIds (que es una propiedad del objeto mapTypeControlOptions).
  4. En el último paso, asocia el identificador al nuevo mapa con estilos.
  5. Configura el mapa para utilizar el nuevo tipo de mapa.
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

El mapa resultante se muestra a continuación. Ten en cuenta el nuevo botón situado en la esquina superior derecha del mapa. Este es el nuevo tipo de mapa creado en el código de ejemplo.

Para obtener información sobre los elementos del mapa cuyo estilo se puede modificar, consulta la secciónRecursos del mapa y para saber cómo aplicar los colores y los efectos, consulta la sección Modificadores de estilos.

El asistente para mapas con estilos

Crear estilos de forma manual y probar tu código para ver cómo quedan puede requerir mucho tiempo. En su lugar, puedes utilizar el siguiente asistente para mapas con estilospara ayudarte a la hora de configurar JSON para los estilos de tus mapas. El asistente te permite seleccionar recursos y sus elementos, aplicar operaciones a esos recursos y guardar los estilos en JSON para copiarlos y pegarlos en tu aplicación.

Autenticación obligatoria

Tienes que acceder a Google+ para realizar esta acción.

Acceder a...

Desarrolladores de Google necesita tu permiso para realizar esta acción.