En este documento, se describe la relación conceptual entre los diseños personalizados y los modos claro y oscuro, y se definen los diferentes tipos de mapas y cómo aplicarles tus diseños.
Para comenzar a usar los diseños personalizados, consulta Cómo crear un diseño 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 al de los mapas para fondos oscuros. Por lo tanto, no puedes usar un mismo estilo para ambos modos.
Los diseños de modo claro y oscuro proporcionan el mapa diseñado más adecuado para diferentes entornos. Cuando usas el ID del mapa en tus aplicaciones, tu app puede cargar el diseño adecuado según el comportamiento programado o la configuración del dispositivo del usuario.
Cómo elegir el modo oscuro o claro cuando creas un diseño
Puedes elegir el modo claro o el modo oscuro cuando creas o copias un estilo. No puedes cambiar el modo de un diseño 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 diseños personalizados, consulta Crea y usa diseños de mapa.
Asocia un diseño de modo claro y un diseño de modo oscuro a un ID de mapa
Un ID de mapa solo admite un diseño de modo claro y un diseño de modo oscuro. Cuando haces clic en el ícono de 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.
Comprende cómo se aplican los diseños personalizados a varios tipos de mapas
Google Maps Platform ofrece diferentes tipos de mapas para satisfacer varios 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 de vectores (como roadmap, navigation y 3D roadmap), usa una combinación de datos de vectores y de imágenes rasterizadas (como terrain y hybrid), o bien usa una combinación de imágenes rasterizadas, polígonos en 3D y datos de imágenes de vectores (como 3D hybrid).
- Mapas de datos vectoriales
- Los tipos de mapa
roadmap,navigationy3D roadmapsolo usan datos vectoriales, lo que te permite aplicar un diseño integral a la mayoría de los elementos del mapa, incluidos los polígonos de tierra y agua, las rutas, los lugares de interés y los puntos de interés.
- Mapas de imágenes de trama
- Los tipos de mapa
terrain,hybridy3D hybridutilizan imágenes de trama con datos vectoriales superpuestos. 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, marcadores y algunas polilíneas (como rutas y fronteras). No puedes personalizar las funciones que forman parte de las imágenes base. - Por ejemplo, en la siguiente imagen, se muestra un diseño con un tema azul. El agua tiene un estilo más oscuro que el predeterminado, y se aplica una paleta de colores azules a las rutas, las áreas al aire libre y los PDI. Cuando obtienes una vista previa del estilo en híbrido y en híbrido 3D, el agua y las áreas al aire libre no son azules, pero las rutas y los POI sí tienen un estilo.
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 |
Una vista de mapa estándar que muestra rutas y elementos principales. | Vector | Modo claro y oscuro |
navigation |
Es un tipo de mapa especializado y optimizado para la guía paso a paso con el SDK de Navigation. Para obtener más información sobre la navegación, consulta el resumen de la personalización de los diseños de mapas para el SDK de Navigation para Android y el SDK de Navigation para iOS. | Vector | Modo claro y oscuro |
terrain |
Un mapa que enfatiza los accidentes físicos del terreno, como montañas, ríos y elevación | Vectoriales y de trama | Modo claro y oscuro |
hybrid |
Una combinación de imágenes satelitales y datos de rutas que muestra los nombres de las calles y otras características clave superpuestas 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 diseñar 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 estilo para los mapas de imágenes de trama
Cuando apliques estilos a los tipos de mapas terrain, 2D hybrid, 3D hybrid y 3D roadmap, es posible que observes los siguientes comportamientos:
Cuando usas diseños personalizados en Android y iOS con el tipo de mapa
terrain, es posible que veas que el agua parpadea temporalmente. Este comportamiento esperado se produce cuando se aplica un diseño al agua, ya que los mosaicos del mapa de ruta se cargan después de los mosaicos del terreno. Esta carga retrasada provoca un breve conflicto visual en los colores personalizados.Los diseños de polígonos pueden ocultar elementos de mapa subyacentes en los tipos de mapa
terrain,2D hybridy3D hybrid. Por ejemplo, un polígono de parque estilizado en un mapa de terreno podría ocultar características sutiles del terreno. En los mapas híbridos, es posible que oculte 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 que aparezcan de forma incorrecta alrededor de los pasos superiores y subterráneos.En los tipos de mapa
3D roadmapy3D 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 diseños personalizados, pruébalos en los diferentes tipos de mapas para ver cómo se aplican. Esto es especialmente importante porque no todos los diseños se aplican a todos los tipos de mapas.
En la consola de Google Cloud, puedes obtener una vista previa de tus diseños 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 typey cambia el tipo de mapa. El mapa se actualizará y mostrará el tipo de mapa con el diseño que aplicaste. - Página de detalles del mapa: En la sección Vista previa del mapa, puedes cambiar entre los diseños 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 diseños personalizados a varios tipos de mapa
En la página de detalles del mapa, después de asociar tus diseños de modo claro y oscuro a tu ID de mapa, haz clic en Mostrar más para elegir si deseas aplicar tus diseños personalizados a varios tipos de mapas. Puedes volver a verificar cómo se aplica el diseño a los tipos de mapas en la sección Vista previa del mapa.