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,navigationy3D roadmapsolo 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,hybridy3D hybridusan 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.
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 hybridy3D 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 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 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 typey 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.