Personaliza la presentación del mapa estándar de Google aplicando tus propios estilos cuando uses la API de Maps Static. Puedes cambiar la representación visual de ciertas características, como rutas, parques, áreas con edificaciones y otros lugares de interés. Cambiar su color o estilo para enfatizar un contenido en particular, complementar el contenido que lo rodea en la página o incluso ocultar por completo las características.
Ejemplos
En el siguiente ejemplo, se muestra un mapa de Brooklyn, EE.UU., con un estilo que consiste en colorear las rutas locales de color verde brillante y las áreas residenciales de color negro. También invierte la luminosidad de las etiquetas para que se destaquen mejor contra un fondo oscuro. Ten en cuenta que en este ejemplo de funcionamiento se usa codificación de URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
En el siguiente ejemplo, se usan operaciones de estilo y simplificaciones para aproximar la apariencia de un atlas de rutas de EE.UU.:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
Sintaxis de estilo
Para crear un mapa con estilos personalizados, incluye uno o más parámetros style
en la URL de la solicitud.
Cada declaración style
puede contener los siguientes argumentos, separados por caracteres de barra vertical (&|
):
feature
(opcional) indica las características que se seleccionarán para esta modificación de estilo. Los elementos incluyen elementos en el mapa, como rutas, parques u otros lugares de interés. Si no hay ningún argumentofeature
, el estilo especificado se aplica a todas las características.element
(opcional) indica los elementos de la característica especificada que se seleccionarán para esta modificación de estilo. Los elementos son características de un elemento, como la geometría o las etiquetas. Si no hay ningún argumentoelement
, el estilo se aplica a todos los elementos de la característica especificada.- Un conjunto de reglas de estilo (obligatorio) para aplicar a los elementos y elementos especificados. La API aplica las reglas en el orden en el que aparecen en la declaración
style
. Puedes incluir cualquier cantidad de reglas, dentro de las restricciones normales de longitud de la URL de la API de Maps Static.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
Funciones
La siguiente declaración style
colorea todas las rutas del mapa:
style=feature:road|color:0xffffff
A continuación, se muestran algunas selecciones de características comunes:
feature:all
(predeterminado) selecciona todos los elementos del mapa.feature:road
selecciona todas las rutas en el mapa.feature:road.local
selecciona todas las rutas locales.
Los elementos, o tipos de elementos, son las características geográficas de un mapa, como las rutas, los parques, las masas de agua y los negocios, entre otros.
Los elementos forman un árbol de categorías, con all
como raíz. Si no especificas un elemento, se seleccionarán todos.
Si especificas un elemento de all
, se produce el mismo efecto.
Algunos elementos tienen elementos secundarios que se especifican con un punto. Por ejemplo, landscape.natural
o road.local
. Si solo especificas el elemento superior, como road
, los estilos que especifiques para este se aplicarán a todos sus elementos secundarios, como road.local
y road.highway
.
Ten en cuenta que los elementos superiores pueden tener algunos elementos que no se incluyan en todos sus elementos secundarios.
Están disponibles los siguientes elementos:
all
(valor predeterminado) selecciona todos los elementos.administrative
selecciona todas las áreas administrativas. El estilo solo se aplicará a las etiquetas de áreas administrativas, y no al relleno o a las fronteras geográficas.administrative.country
selecciona países.administrative.land_parcel
selecciona parcelas.administrative.locality
selecciona localidades.administrative.neighborhood
selecciona barrios.administrative.province
selecciona provincias.
landscape
selecciona todos los paisajes.landscape.man_made
selecciona elementos creados por las personas, como edificios y otras estructuras.landscape.natural
selecciona elementos naturales, como montañas, ríos, desiertos y glaciares.landscape.natural.landcover
selecciona elementos de cobertura terrestre, el material físico que cubre la superficie terrestre, como bosques, praderas, humedales y terrenos desnudos.landscape.natural.terrain
selecciona los elementos de terreno de una superficie terrestre, como la elevación, la pendiente y la orientación.
poi
selecciona todos los lugares de interés.poi.attraction
selecciona atracciones turísticas.poi.business
selecciona negocios.poi.government
selecciona edificios gubernamentales.poi.medical
selecciona servicios de emergencia, como hospitales, farmacias, dependencias policiales, médicos y otros.poi.park
selecciona parques.poi.place_of_worship
selecciona lugares de culto religioso, como iglesias, templos y mezquitas, entre otros.poi.school
selecciona escuelas.poi.sports_complex
selecciona complejos deportivos.
road
selecciona todas las rutas.road.arterial
selecciona las rutas principales.road.highway
selecciona autopistas.road.highway.controlled_access
selecciona autopistas con acceso controlado.road.local
selecciona las rutas locales.
transit
selecciona todas las líneas y estaciones de transporte público.transit.line
selecciona las líneas de transporte público.transit.station
selecciona todas las estaciones de transporte público.transit.station.airport
selecciona aeropuertos.transit.station.bus
selecciona paradas de autobús.transit.station.rail
selecciona estaciones de tren.
water
selecciona masas de agua.
Elementos
La siguiente declaración style
colorea las etiquetas para todas las rutas locales:
style=feature:road.local|element:labels|color:0xffffff
Los componentes son subdivisiones de un elemento. Una ruta, por ejemplo, consta de la línea gráfica (la geometría) en el mapa y del texto que describe su nombre (una etiqueta).
Los siguientes componentes se encuentran disponibles; sin embargo, ten en cuenta que un elemento en particular puede admitir todos los componentes, algunos de ellos o ninguno:
all
(predeterminado) selecciona todos los elementos del elemento especificado.geometry
selecciona todos los elementos geométricos de la característica especificada.geometry.fill
selecciona únicamente el relleno de la geometría del elemento.geometry.stroke
selecciona únicamente el trazo de la geometría del elemento.
labels
selecciona las etiquetas textuales asociadas con el atributo especificado.labels.icon
selecciona únicamente el ícono que se muestra dentro de la etiqueta del elemento.labels.text
selecciona únicamente el texto de la etiqueta.labels.text.fill
selecciona únicamente el relleno de la etiqueta. El relleno de una etiqueta normalmente se renderiza como un contorno coloreado que rodea al texto de la etiqueta.labels.text.stroke
selecciona únicamente el trazo del texto de la etiqueta.
Reglas de estilo
Las reglas de estilo son opciones de formato que se aplican a las características y los elementos especificados en cada declaración style
.
La siguiente declaración style
aplica dos reglas de estilo a las rutas en el mapa. La primera aplica un color a las carreteras. La segunda regla simplifica la visualización de las rutas, por lo que tienen líneas más delgadas sin contornos:
style=feature:road|color:0xffffff|visibility:simplified
Cada declaración style
debe contener una o más operaciones separadas con el carácter de barra vertical (&|
). Cada operación especifica su valor de argumento con dos puntos (:
) y todas las operaciones se aplican a la selección en el orden en que las especificas.
Se admiten las siguientes opciones de estilo:
hue
(una string hexadecimal RGB con formato#RRGGBB
) indica el color básico.Nota: Esta opción define el matiz sin modificar la saturación ni la luminosidad especificadas en el estilo predeterminado de Google (o en otras opciones de estilo que definas en el mapa). El color que se obtiene depende del estilo del mapa base. Si Google cambia este estilo, las modificaciones afectarán los elementos de tu mapa cuyo estilo se ajuste mediante
hue
. Si es posible, se recomienda usar el parámetro de estilocolor
absoluto.lightness
(un valor de punto flotante entre-100
y100
) indica el cambio porcentual en el brillo del componente. Los valores negativos aumentan la oscuridad (donde -100 especifica negro) y los valores positivos aumentan el brillo (donde +100 especifica blanco).Nota: Esta opción define la luminosidad sin modificar la saturación ni el matiz especificados en el estilo predeterminado de Google (o en otras opciones de estilo que definas en el mapa). El color que se obtiene depende del estilo del mapa base. Si Google cambia este estilo, las modificaciones afectarán los elementos de tu mapa cuyo estilo se ajuste mediante
lightness
. Si es posible, se recomienda usar el parámetro de estilocolor
absoluto.saturation
(un valor de punto flotante entre-100
y100
) indica el cambio porcentual en la intensidad del color básico que se aplicará al elemento.Nota: Esta opción define la saturación sin modificar la luminosidad ni el matiz especificados en el estilo predeterminado de Google (o en otras opciones de estilo que definas en el mapa). El color que se obtiene depende del estilo del mapa base. Si Google cambia este estilo, las modificaciones afectarán los elementos de tu mapa cuyo estilo se ajuste mediante
saturation
. Si es posible, se recomienda usar el parámetro de estilocolor
absoluto.gamma
(un valor de punto flotante entre0.01
y10.0
, donde1.0
no aplica corrección) indica la cantidad de corrección de gamma que se aplicará al componente. Las correcciones de gamma modifican la luminosidad de los colores de forma no lineal, y no modifican los valores de blanco y negro. Por lo general, la corrección de gamma se usa para modificar el contraste de varios componentes. Por ejemplo, puedes modificar un valor de gamma para aumentar o reducir el contraste entre los bordes y los interiores de los componentes.Nota: Esta opción establece la luminosidad según el estilo predeterminado de Google mediante una curva de gamma. Si Google cambia el estilo del mapa base, las modificaciones afectarán los elementos de tu mapa cuyo estilo se ajuste mediante
gamma
. Si es posible, se recomienda usar el parámetro de estilocolor
absoluto.invert_lightness
(si estrue
) invierte la luminosidad actual. Esto resulta útil, por ejemplo, para cambiar de forma rápida a un mapa más oscuro con texto blanco.Nota: Esta opción simplemente invierte el estilo predeterminado de Google. Si Google cambia el estilo del mapa base, las modificaciones afectarán los elementos de tu mapa cuyo estilo se ajuste mediante
invert_lightness
. Si es posible, se recomienda usar el parámetro de estilocolor
absoluto.visibility
(on
,off
osimplified
) indica si el componente aparece en el mapa y la manera en que esto sucede. Mediante la opción de visibilidadsimplified
, se quitan algunas de las características de estilo de los elementos afectados. En el caso de las rutas, por ejemplo, se aplica una simplificación con líneas más finas y sin contornos, y en el caso de los parques, se elimina el texto de las etiquetas, pero se conserva el ícono de estas.color
(una string hexadecimal RGB con formato#RRGGBB
) configura el color del elemento.weight
(un valor entero, igual o superior a cero) configura el peso del elemento en píxeles. Si se fija en un valor alto, podrían aplicarse recortes cerca de los bordes de los mosaicos.
Las reglas de estilo se aplican en el orden que especifiques. No combines varias operaciones en una única operación de estilo. En cambio, define cada operación como una entrada independiente en el array de estilo.
Nota: El orden es importante, ya que algunas operaciones no son conmutativas. Los elementos o componentes que se modifican con operaciones de estilo suelen tener estilos existentes. Las operaciones se aplican a esos estilos que ya existen (si están presentes).
Modelo de matiz, saturación y luminosidad
En los mapas con estilos, se usa el modelo de matiz, saturación y luminosidad (HSL, por su sigla en inglés) para indicar el color dentro de las operaciones de parámetros de estilo. Hue (matiz) indica el color básico, saturation (saturación) indica la intensidad de ese color y lightness (luminosidad) indica la cantidad relativa de blanco o negro en el color constituyente.
La corrección de gamma modifica la luminosidad en el espacio de color (por lo general, para aumentar o disminuir el contraste). Además, el modelo HSL define el color en un espacio de coordenadas donde hue
indica la orientación en una paleta de colores y la saturación y la luminosidad indican amplitudes a lo largo de diferentes ejes. Los matices se miden en un espacio de color RGB similar a la mayoría de los espacios de color RGB, excepto porque no están presentes los tonos de blanco y negro.
Si bien hue
admite un valor de color hexadecimal HTML, solo lo usa para determinar el color básico (su orientación en la paleta de colores, y no su saturación o luminosidad, que se indican por separado como cambios porcentuales).
Por ejemplo, puedes definir el matiz del verde puro como hue:0x00ff00
o hue:0x000100
. Ambos matices son idénticos. Ambos valores apuntan al verde puro en el modelo de color HSL.
Una paleta de colores RGB
Los valores hue
de RGB que consisten en partes iguales de rojo, verde y azul no indican un matiz, porque ninguno de esos valores indica una orientación en el espacio de coordenadas de HSL. Algunos ejemplos son "#000000" (negro), "#FFFFFF" (blanco) y todos los tonos puros de gris. Para indicar negro, blanco o gris, debes quitar por completo saturation
(configura el valor en -100
) y ajustar lightness
.
Además, cuando se modifican elementos existentes que ya tienen un esquema de color, al cambiar un valor como hue
no cambian sus valores de saturation
o lightness
existentes.