Cómo usar el editor de estilo

En esta página, se muestra cómo personalizar el estilo del mapa con el editor de estilos de Google Cloud Console. En el editor de estilo, puedes personalizar el estilo de los elementos del mapa, como el color de relleno y contorno de los elementos del mapa. Puedes controlar la visibilidad y densidad de los lugares de interés y aplicar estilos según el nivel de zoom.

Las personalizaciones de tu estilo de mapa siempre tendrán prioridad sobre las actualizaciones de Google relacionadas, como las que afectan el estilo predeterminado de un mapa optimizado para la industria o el Mapa base de Google.

Ejemplo

Para ejecutar la app de ejemplo ApiDemos, consulta la muestra de GitHub (Java | Kotlin) y mira la demostración CloudBasedMapStylingActivity (Java | Kotlin).

Cómo personalizar el estilo de los elementos del mapa

Puedes personalizar el estilo de un elemento, como el color de relleno y contorno de una ruta:

  1. Para abrir el editor de estilo, ve a la página Estilos de mapa en Cloud Console y crea un estilo de mapa o actualiza uno existente.
  2. Selecciona un elemento para abrir el submenú Tipo de elemento. Un cambio de estilo en un elemento superior también se aplica a sus elementos secundarios. Por ejemplo, si personalizas el elemento Ruta para que sea de color amarillo, esa personalización de color también se aplica a los elementos secundarios: Autopista, Acceso controlado, Arteria, Local, Transitable y Senda.
  3. Para personalizar un elemento, selecciona el elemento superior Geometría. Se abrirá el submenú Stylers:
    • Si se cambia el color, se selecciona automáticamente la casilla de verificación Color y se aplican las personalizaciones de color al elemento Geometría y a sus elementos secundarios.
    • Selecciona una de las siguientes opciones para activar o desactivar la visibilidad de los elementos:
      • Heredar (opción predeterminada): El elemento hereda las personalizaciones del elemento superior.
      • Activada: Anula cualquier personalización heredada, lo que garantiza que el elemento siempre sea visible en el mapa.
      • Desactivada: Anula cualquier personalización heredada, lo que garantiza que el elemento siempre esté oculto.
  4. Haz clic en Guardar para guardar los cambios. Los cambios no se aplicarán a ningún mapa hasta que hagas clic en Publicar.

Cómo personalizar elementos según el nivel de zoom

Puedes personalizar el estilo de los elementos existentes en función del nivel de zoom cuando creas estilos de mapa con el editor de estilo de Google Cloud Console. Por ejemplo, puedes personalizar el color del agua de modo que se vea rosa con el nivel de zoom 0 y púrpura con el nivel de zoom 10, y asociar otras personalizaciones con el nivel de detalle que el zoom especificado te permita ver.

Para personalizar el estilo con diferentes niveles de zoom, sigue estos pasos:

  1. Para abrir el editor de estilo, ve a la página Estilos de mapa en Cloud Console y crea un estilo de mapa o actualiza uno existente.
  2. Selecciona un elemento para abrir el submenú Tipo de elemento y elige el elemento que desees personalizar.

  3. Marca la casilla de verificación Customize across zooms para que las personalizaciones con el nivel de zoom actual aparezcan en el editor de estilo.

    Tras marcar la casilla de verificación Customize across zooms, deberías ver lo siguiente:

    • Una casilla de verificación Add stop: z, que indica tu nivel de zoom actual y aplica las personalizaciones al nivel de zoom indicado.
    • Una barra deslizante de zoom para modificar y seleccionar el nivel de zoom deseado, el cual también puedes ajustar con los controles booleanos del zoom del mapa o las teclas de flecha del teclado.

  4. Cuando personalizas las opciones del submenú Stylers, el editor de estilo selecciona automáticamente la casilla de verificación Add stop: z, muestra un punto azul sobre el control deslizante y anula los estilos heredados.

    El punto azul sobre el control deslizante indica que se realizaron cambios en el nivel de zoom seleccionado. Si no deseas guardar los cambios para un nivel de zoom en particular, desmarca la casilla de verificación Add stop: z (el punto azul se volverá gris a fin de indicar que los cambios no se guardarán para ese nivel). A continuación, el elemento recuperará su estilo heredado.

    Todas las personalizaciones que realices con un nivel de zoom determinado se aplicarán a los niveles de zoom indicados y a aquellos superiores. Por ejemplo, las personalizaciones que se realicen con el nivel de zoom 10 se aplicarán a los niveles de zoom 10, 11, 12, etc. Las personalizaciones anulan cualquier estilo heredado.

  5. Para guardar los cambios, haz clic en Guardar. Para que tus cambios sean públicos en los ID de mapa asociados con el estilo en cuestión, haz clic en Publicar.