Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Static Maps API

Para que puedas comenzar, te proporcionaremos orientación en la consola para desarrolladores de Google a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Static Maps API
  3. Crear claves correspondientes
Continuar

Mapas con estilos

Personaliza la presentación del mapa estándar de Google aplicando tus propios estilos cuando uses la Google Static Maps API. Puedes cambiar la representación visual de ciertas características, como carreteras, parques, áreas con edificaciones y otros puntos de interés. Cambia su color o estilo para enfatizar un contenido en particular, complementa contenido que lo rodee en la página e incluso oculta características por completo.

Ejemplos

En el siguiente ejemplo se muestra un mapa de Brooklyn, Estados Unidos, con ajustes de estilo que incluyen color verde brillante para carreteras locales y negro para áreas residenciales. También se invierte la luminosidad de las etiquetas, para que sobresalgan mejor con 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&center=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

El siguiente ejemplo se usan operaciones y simplificaciones de estilo para aproximar la apariencia de un atlas de rutas de EE.UU.

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=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

Sintaxis de estilo

Para crear un mapa de estilo personalizado, incluye uno o más parámetros de style en la URL de solicitud.

Cada declaración de estilo 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. Las características incluyen objetos del mapa, como carreteras, parques u otros puntos de interés. Si no existen argumentos feature, el estilo especificado se aplica a todas las funciones.
  • element (opcional) indica los elementos de la función especificada que se seleccionarán para esta modificación de estilo. Los elementos son aspectos de una característica, como la geometría o las etiquetas. Si no se presenta un argumento element, el estilo se aplica a todos los elementos de la característica especificada.
  • Un conjunto de reglas de estilo (obligatorio) que se aplicará a las funciones y elementos especificados. La API aplica las reglas en el orden en que aparecen en la declaración de estilo. Puedes incluir cualquier número de reglas, dentro de las restricciones normales de longitud de la URL de la Google Static Maps API.

Nota: la declaración de style debe especificar los argumentos anteriores en el orden indicado. En el siguiente ejemplo se ofrece la sintaxis correcta para una selección de función y elemento con dos reglas:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Funciones

La siguiente declaración de estilo colorea todas las carreteras del mapa:

style=feature:road|color:0xffffff

A continuación, se muestran algunas selecciones de características comunes:

  • feature:all (predeterminada) selecciona todas las características del mapa.
  • feature:road selecciona todas las calles/rutas en el mapa.
  • feature:road.local selecciona todas las carreteras locales.

Las características, o clases de características, son aspectos geométricos de un mapa, como las carreteras, los parques, las masas de agua y los negocios, entre otras.

Las funciones forman un árbol de categorías, cuya raíz es all. Si no especificas una función, se seleccionarán todas. Si especificas all, también se seleccionarán todas.

Algunas funciones tienen funciones secundarias que se especifican con un punto. Por ejemplo, landscape.natural o road.local. Si solo especificas la función principal, como road, los estilos que especifiques para esta se aplicarán a todas sus funciones secundarias, como road.local y road.highway.

Ten en cuenta que las funciones principales pueden tener algunos elementos que no se incluyan en todas sus funciones secundarias.

Están disponibles las siguientes funciones:

  • all (predeterminado) selecciona todas las características.
  • administrative selecciona todas las áreas administrativas. El estilo solo se aplicará a las etiquetas de áreas administrativas, y no al relleno o a los bordes geográficos.
    • 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 estructuras artificiales.
    • landscape.natural selecciona elementos naturales.
    • landscape.natural.landcover selecciona elementos que recubren el terreno.
    • landscape.natural.terrain selecciona elementos de terreno.
  • poi selecciona puntos de interés.
    • poi.attraction selecciona atracciones turísticas.
    • poi.business selecciona negocios.
    • poi.government selecciona edificios gubernamentales.
    • poi.medical selecciona elementos relacionados con emergencias, como hospitales, farmacias, estaciones de policía y médicos, entre 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 carreteras.
    • road.arterial selecciona arterias.
    • road.highway selecciona autopistas.
    • road.highway.controlled_access selecciona autopistas con acceso controlado.
    • road.local selecciona carreteras locales.
  • transit selecciona todas las líneas y estaciones de transporte público.
    • transit.line selecciona líneas de tránsito.
    • transit.station selecciona todas las estaciones de transporte público.
    • transit.station.airport selecciona aeropuertos.
    • transit.station.bus selecciona paradas de autobuses.
    • transit.station.rail selecciona estaciones de tren.
  • water selecciona masas de agua.

Elementos

En la siguiente declaración de style se seleccionan las etiquetas para todas las carreteras locales:

style=feature:road.local|element:labels|color:0xffffff

Los elementos son subdivisiones de una función. Una carretera, 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 elementos siguientes se encuentran disponibles; sin embargo, ten en cuenta que una función en particular puede admitir todos los elementos, algunos de ellos o ninguno:

  • all (predeterminado) selecciona todos los elementos de la función especificada.
  • geometry selecciona todos los elementos geométricos de la función especificada.
    • geometry.fill selecciona únicamente el relleno de la geometría de la función.
    • geometry.stroke selecciona únicamente el trazo de la geometría de la función.
  • labels selecciona las etiquetas de texto asociadas a la función especificada.
    • labels.icon selecciona únicamente el icono que se muestra dentro de la etiqueta de la función.
    • 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 representa 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 de style.

La siguiente declaración style aplica dos reglas de estilo a las carreteras en el mapa. La primera aplica un color a las carreteras. La segunda simplifica la visualización de estas, de modo que tengan líneas más delgadas sin contornos:

style=feature:road|color:0xffffff|visibility:simplified

Cada declaración de style debe contener una o más operaciones separadas por un carácter de barra vertical ("|"). Cada operación especifica el valor de su argumento con dos puntos (":"), y se aplican todas las operaciones a la selección en el orden en el que se especifican.

Se admiten las siguientes opciones de estilo:

  • hue (string hexadecimal RGB con formato 0xRRGGBB) 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 básico. Si Google cambia este estilo, las modificaciones afectarán las características de tu mapa que reciban ajustes de estilo con hue. Si es posible, se recomienda usar el parámetro de estilo color absoluto.

  • lightness (un valor de punto flotante entre -100 y 100) indica el cambio en el porcentaje de brillo del elemento. Los valores negativos aumentan la oscuridad (donde -100 especifica negro) mientras 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 básico. Si Google cambia este estilo, las modificaciones afectarán las características de tu mapa que reciban ajustes de estilo con lightness. Si es posible, se recomienda usar el parámetro de estilo color absoluto.

  • saturation (un valor de punto flotante entre -100 y 100) indica el cambio en el porcentaje de 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 básico. Si Google cambia este estilo, las modificaciones afectarán las características de tu mapa que reciban ajustes de estilo con saturation. Si es posible, se recomienda usar el parámetro de estilo color absoluto.

  • gamma (un valor de punto flotante entre 0.01 y 10.0, donde 1.0 no aplica corrección) indica la cantidad de corrección gamma que se aplicará al elemento. Las correcciones de gama 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 gama se usa para modificar el contraste de varios elementos. Por ejemplo, puedes modificar un valor de gama para aumentar o reducir el contraste entre los bordes y el interior de los elementos.

    Nota: Esta opción establece la luminosidad según el estilo predeterminado de Google mediante una curva de gama. Si Google cambia este estilo, las modificaciones afectarán las características de tu mapa que reciban ajustes de estilo con gamma. Si es posible, se recomienda usar el parámetro de estilo color absoluto.

  • invert_lightness (cuando es true) invierte la luminosidad actual. Esto resulta útil, por ejemplo, para realizar un cambio rápido a un mapa más oscuro con texto blanco.

    Nota: Esta opción simplemente invierte el estilo predeterminado de Google. Si Google cambia este estilo, las modificaciones afectarán las características de tu mapa que reciban ajustes de estilo con invert_lightness. Si es posible, se recomienda usar el parámetro de estilo color absoluto.

  • visibility (on, off o simplified) indica si el elemento aparece en el mapa y la manera en que esto sucede. Con un elemento de visibilidad simplified se eliminan algunas de las funciones de estilo de las funciones afectadas. En el caso de las carreteras, por ejemplo, se aplica una simplificación con líneas más finas y sin contornos, y en el de los parques se elimina el texto de etiquetas, pero se conserva el icono de estas.
  • color (string hexadecimal RGB con formato 0xRRGGBB) establece el color de la característica.
  • weight (valor entero, igual o superior a cero) configura el peso de la función en píxeles. Si se fija en un valor alto, como resultado puede aplicarse un recorte 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 lugar de ello, define cada operación como una entrada independiente en la matriz de estilo.

Nota: El orden es importante, ya que algunas operaciones no son conmutativas. Las funciones o los elementos que se modifican con operaciones de estilo por lo general tienen de antemano estilo. 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 ajustes de estilo, se usa el modelo de matices, saturación y luminosidad (HSL) para indicar el color dentro de las operaciones de ajuste de estilo. Hue indica el color básico, saturation indica la intensidad de ese color, y lightness indica la cantidad relativa de blanco o negro en el color constituyente.

La corrección de gama modifica la luminosidad en el espacio de color (por lo general, para aumentar o disminuir el contraste). Además, el modelo HSL define color en un espacio de coordenadas donde hue indica la orientación en una paleta de colores, y la saturación y el brillo indican amplitudes a lo largo de diferentes ejes. Los tonos 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 matices de blanco y negro.

Modelo de matiz, saturación y luminosidad

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 de porcentaje).

Por ejemplo, puedes definir el matiz del color 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.

Paleta de colores RGB

Los valores hue de RGB que tengan la misma cantidad de rojo, verde y azul no indican un matiz porque ninguno de ellos indica una orientación en el espacio de coordenadas de HSL. Ejemplo: “#000000” (negro), “#FFFFFF” (blanco) y todos los tonos puros de gris. Para indicar negro, blanco o gris, debes eliminar por completo saturation (agrega el valor -100) y ajustar lightness.

Además, al modificar características existentes que ya tienen un esquema de color, cambiar un valor como hue no cambia su saturation o lightness existentes.

Enviar comentarios sobre…

Google Static Maps API
¿Necesitas ayuda? Visita nuestra página de asistencia.