Más información sobre los modos y los tipos de mapas

Selecciona la plataforma: Android iOS JavaScript Servicio web

Dos pantallas de la app que muestran el mapa en modo oscuro y claro

En este documento, se describe la relación conceptual entre los estilos personalizados y los modos claro y oscuro, y se definen los diferentes tipos de mapas y cómo aplicarles tus estilos.

Para comenzar a usar estilos personalizados, consulta Cómo crear un estilo nuevo.

Información sobre los modos claro y oscuro

Puedes crear dos estilos distintos para un solo ID de mapa: uno optimizado para fondos claros y otro para fondos oscuros. Los mapas para fondos claros usan un mapa base diferente del que se usa para los fondos oscuros. Por lo tanto, no puedes usar un estilo para ambos modos.

Los estilos de modo claro y oscuro proporcionan el mapa con diseño más adecuado para diferentes entornos. Cuando usas el ID de mapa en tus aplicaciones, tu app puede cargar el estilo adecuado según el comportamiento programado o la configuración del dispositivo del usuario.

Elige el modo claro o el oscuro cuando crees un estilo

Puedes elegir el modo claro o el oscuro cuando creas o copias un estilo. No puedes cambiar el modo de un estilo después de crearlo.

Puedes verificar el tipo de diseño en la página de detalles del diseño.

Para obtener instrucciones paso a paso sobre cómo crear estilos personalizados, consulta Crea y usa estilos de mapa.

Asocia un estilo de modo claro y un estilo de modo oscuro a un ID de mapa

Un ID de mapa solo admite un estilo de modo claro y un estilo de modo oscuro. Cuando haces clic en el ícono Editar para cambiar un estilo de modo claro o de modo oscuro, el panel solo muestra tus estilos para ese modo. Para obtener más información, consulta Cómo asociar tu diseño a un ID de mapa.

Comprender cómo se aplican los estilos personalizados a varios tipos de mapas

Google Maps Platform ofrece diferentes tipos de mapas para distintos casos de uso, incluidos roadmap, navigation, hybrid, terrain, 3D roadmap y 3D hybrid. El nivel de personalización depende de si el mapa se basa solo en datos vectoriales (como roadmap, navigation y 3D roadmap), usa una combinación de datos vectoriales e imágenes de trama (como terrain y hybrid) o usa una combinación de imágenes de trama, polígonos 3D e imágenes vectoriales (como 3D hybrid).

Mapas de datos vectoriales
Los tipos de mapas roadmap, navigation y 3D roadmap solo usan datos vectoriales, lo que te permite aplicar diseño de forma integral a la mayoría de los componentes del mapa, incluidos los polígonos para tierra y agua, las rutas, los puntos de referencia y los lugares de interés.
Mapas de imágenes de trama
Los tipos de mapa
, terrain, hybrid y 3D hybrid usan imágenes de trama con datos vectoriales en la parte superior. Por lo tanto, sus capacidades de diseño son limitadas. Por lo general, solo puedes aplicar diseño a los datos vectoriales que se superponen en las imágenes, como etiquetas, pines y algunas polilíneas (como rutas y límites). No puedes personalizar los elementos que forman parte de las imágenes base.
Por ejemplo, en la siguiente imagen, se muestra un estilo con un tema azul. El agua tiene un estilo más oscuro que el predeterminado, y se aplica una paleta azul a las rutas, las áreas al aire libre y los lugares de interés. Cuando obtienes una vista previa del diseño en los tipos de mapa híbrido y 3D híbrido, el agua y las áreas al aire libre no son azules, pero las rutas y los lugares de interés siguen teniendo diseño.

Mapas con diseño de agua rosa, pero para los mapas híbridos y los mapas híbridos en 3D, el agua aparece con los colores predeterminados.

Definiciones de tipos de mapas y compatibilidad con modos

En la siguiente tabla, se definen los tipos de mapas y se muestra cuáles admiten los modos claro y oscuro.

Tipo de mapa Descripción Imágenes del mapa base Compatibilidad con modos
roadmap Es una vista de mapa estándar que muestra las rutas y los componentes principales. Vector Modos claro y oscuro
navigation Es un tipo de mapa especializado que se optimizó para la navegación paso a paso con el SDK de Navigation. Para obtener más información sobre la navegación, consulta la descripción general de la personalización de los diseños de mapa para el SDK de Navigation para Android y el SDK de Navigation para iOS. Vector Modos claro y oscuro
terrain Es un mapa que destaca los componentes físicos del terreno, como montañas, ríos y elevaciones. Vectoriales y de trama Modos claro y oscuro
hybrid Es una combinación de imágenes satelitales y datos de mapas de ruta, que muestra nombres de calles y otros elementos clave superpuestos en las imágenes. Vectoriales y de trama Solo modo claro
3D roadmap Un mapa estándar en 3D que muestra rutas y elementos principales. Este tipo de mapa solo está disponible en los mapas en 3D de la API de Maps JavaScript. Vector Solo modo claro
3D hybrid Un mapa fotorrealista en 3D en el que puedes definir el diseño de la visibilidad de las etiquetas de los lugares de interés, las rutas y las señales de tránsito. Este tipo de mapa solo está disponible en los mapas en 3D de la API de Maps JavaScript. Vectoriales y de trama Solo modo claro

Consideraciones de diseño para los mapas de imágenes de trama

Cuando apliques un diseño a los tipos de mapas terrain, 2D hybrid, 3D hybrid y 3D roadmap, es posible que observes los siguientes comportamientos:

  • Cuando uses estilos personalizados en Android y iOS con el tipo de mapa terrain, es posible que notes que el agua parpadea temporalmente. Este comportamiento esperado ocurre cuando se aplica diseño al agua, ya que las tarjetas de mapa de ruta se cargan después de las tarjetas de terreno. Esta carga retrasada provoca un breve conflicto visual en los colores personalizados.

  • Los diseños de polígonos pueden ocultar elementos del mapa subyacentes en los tipos de mapa terrain, 2D hybrid y 3D hybrid. Por ejemplo, un polígono de parque estilizado en un mapa de relieve podría ocultar características sutiles del terreno. En los mapas híbridos, es posible que se oculten las imágenes satelitales subyacentes.

  • En el caso de 3D hybrid, es posible que las polilíneas de las rutas se rendericen debajo de los puentes o aparezcan de forma incorrecta alrededor de los pasos elevados y subterráneos.

  • En los tipos de mapas 3D roadmap y 3D hybrid, no puedes modificar la configuración del mapa para controlar la densidad de los lugares de interés, el diseño de los edificios, el diseño de los puntos de referencia ni el color de fondo de la app.

Obtén una vista previa de tus diseños en cada tipo de mapa

Después de crear tus estilos personalizados, pruébalos en los diferentes tipos de mapas para ver cómo se aplican. Esto es especialmente importante porque no todos los estilos se aplican a todos los tipos de mapas.

En la consola de Google Cloud, puedes obtener una vista previa de tus estilos personalizados en el editor de diseño o en la página de detalles del mapa, de la siguiente manera:

  • Editor de diseño: En el panel contextual, selecciona la lista desplegable Map type y cambia el tipo de mapa. El mapa se actualiza y muestra el tipo de mapa con el diseño aplicado.
  • Página de detalles del mapa: En la sección Vista previa del mapa, puedes alternar entre los estilos de modo claro y oscuro, y cambiar la variante en la lista desplegable a diferentes tipos de mapas. Primero, debes asociar tu diseño al ID de mapa para poder obtener una vista previa.

Aplica tus estilos personalizados a varios tipos de mapas

En la página de detalles del mapa, después de asociar tus estilos de modo claro y oscuro a tu ID de mapa, haz clic en Mostrar más para elegir si deseas aplicar tus estilos personalizados a varios tipos de mapas. Puedes verificar una vez más cómo se aplica el estilo a los tipos de mapas en la sección Vista previa del mapa.