Disponibilidad: Esta función se puede ver en Android, iOS, JavaScript y Maps Static.
Adapta mejor tu mapa a las necesidades de tus usuarios destacando los componentes en el nivel de zoom con el que se ve el mapa. Por ejemplo, puedes destacar lugares de interés o rutas cuando los usuarios acerquen el mapa a una ubicación de interés en particular.
Puedes aplicar ajustes de diseño a los elementos de un componente de mapa para que tengan la misma apariencia en todos los niveles de zoom del mapa, o bien puedes crear distintos diseños para los distintos niveles.
No todos los componentes admiten la personalización en los distintos niveles de zoom. Los elementos de los componentes de mapa a los que puedes aplicar ajustes de diseño basado en el nivel de zoom tienen un ícono de diamante a la derecha.
Información acerca del diseño basado en el nivel de zoom
Los niveles de zoom van del 0 (el más alejado), que muestra el mundo, al 22 (el más cercano), que muestra una pequeña parte detallada del mapa. El keyZoom es el nivel de zoom en el que deseas iniciar un diseño nuevo.
Cuando aplicas ajustes de diseño a componentes de mapa en diferentes niveles de zoom, ese diseño se aplica a todos los niveles más altos (más cercanos) hasta alcanzar otro nivel con diseño. El nivel de zoom 0 siempre se agrega con el diseño actual.
Por ejemplo, si estableces diseños en los niveles de zoom 5 y 10, ocurrirá lo siguiente:
- El diseño correspondiente al nivel de zoom 5 se aplicará a los niveles del 5 al 9.
- El diseño correspondiente al nivel de zoom 10 se aplicará a los niveles del 10 al 22.
- Los niveles de zoom del 0 al 4 conservarán el diseño actual.
Cuando personalizas el diseño de un componente de mapa según el nivel de zoom, se anulan todos los diseños personalizados del componente de mapa general.
Cómo personalizar los diferentes niveles de zoom
En la consola de Cloud, ve a Diseños de mapa y selecciona un proyecto, si es necesario.
Crea o abre un diseño de mapa y selecciona Personalizar. Para obtener más información, consulta Cómo crear un diseño de mapa.
En el panel Componentes del mapa, selecciona el que desees personalizar. Se abrirá un panel con los elementos que puedes personalizar.
Junto al elemento al que deseas aplicar ajustes de diseño basado en el nivel de zoom, selecciona el diamante de zoom de la derecha para abrir el panel de diseño correspondiente.
Junto a Zoom actual, selecciona el nivel de zoom que deseas personalizar. La vista previa del mapa se ajustará a ese nivel de zoom.
Selecciona Agregar keyZoom (Add Keyzoom). El panel de diseño basado en el nivel de zoom agrega el nuevo keyzoom en el nivel de zoom seleccionado y muestra el valor predeterminado del mapa base correspondiente.
Aplica los ajustes de diseño en este nivel de zoom y, si es necesario, en el nivel 0 y en cualquier otro nivel de zoom predeterminado que se indique.
Si deseas establecer otro nivel de zoom, cambia el Zoom actual (Current zoom) y vuelve a seleccionar Agregar KeyZoom (Add Keyzoom) para incluir otro nivel en la lista. Sigue agregando y configurando diseños basados en el nivel de zoom hasta que termines.
Una vez que tengas todo listo, cierra el panel de diseño basado en el nivel de zoom.
Reemplaza los valores de color del mapa base predeterminados de un elemento
Si deseas reemplazar todos los valores de color del mapa base predeterminados de un elemento de componente de mapa en todos los niveles de zoom, primero aplica un diseño al elemento en el panel de elementos. Cuando agregas zooms de teclas a ese elemento, el zoom de teclas usa el valor de color del elemento establecido en lugar del valor de color predeterminado del mapa base.
Cómo guardar y publicar un diseño basado en el nivel de zoom
Para guardar los cambios de tu diseño de mapa, selecciona Guardar.
Si deseas publicar los cambios para los IDs de mapa asociados con el diseño en cuestión, selecciona Publicar.
Cómo quitar un diseño basado en el nivel de zoom
En el panel Componentes del mapa, selecciona el que desees personalizar.
Junto al elemento del que deseas quitar el diseño basado en el nivel de zoom, selecciona el pequeño diamante de zoom que se encuentra a la derecha. Los elementos con diseños basados en el nivel de zoom tienen un diamante azul relleno.
Junto al nivel de zoom que deseas quitar, selecciona el ícono de menos para borrarlo.
Selecciona la X para cerrar el panel de diseño basado en el nivel de zoom.
Cómo quitar todos los diseños basados en el nivel de zoom
Si deseas quitar todos los diseños personalizados de un elemento del componente de mapa, puedes hacer lo siguiente:
- En el panel de elementos, selecciona el ícono de signo menos junto al nombre del elemento.
- En el panel de Keyzoom, selecciona el ícono de restablecimiento junto al nombre del elemento.
Vista previa de los detalles a nivel de la ruta
A partir del 27 de febrero de 2025, podrás obtener una vista previa de los detalles mejorados a nivel de la ruta en los niveles de zoom 17 y superiores en tus diseños existentes, como anchos de ruta realistas, aceras, marcas de carril y otras características en ciudades seleccionadas. Debes habilitar la vista previa para cada sesión del editor de estilos. Estas características de mapas de detalles de rutas solo son visibles en los SDK o las APIs que admiten detalles a nivel de la ruta. Para aplicarlos en tu app, debes actualizar el SDK o la API asociados a la versión que admite detalles a nivel de la ruta. Para obtener más información sobre las versiones de la API y el SDK, consulta Detalles a nivel de la ruta para Google Maps Platform.
Para habilitar la vista previa de los detalles de la ruta, haz lo siguiente:
En la consola de Google Cloud, ve a Diseños de mapa.
Selecciona un estilo existente o Crea un estilo.
Haz clic en Personalizar.
En el editor de estilo, haz clic en Vista previa de los detalles de la ruta.
En el diálogo de vista previa, activa Detalles de ruta.
Para obtener detalles sobre los detalles a nivel de la ruta que puedes aplicar diseño, consulta ¿Qué elementos de diseño puedes personalizar en el mapa?
Se agregaron diseños de nivel de zoom para suavizar la transición de diseño en los niveles de zoom 17 y superiores.
En los niveles de zoom 17 y superiores con los detalles a nivel de la ruta habilitados, los componentes del mapa de ruta desaparecen y se convierten en el componente del mapa de superficie. A medida que acercas la imagen, aparecen los elementos con diseño que se aplican al componente del mapa de superficie y reemplazan los componentes y diseños del mapa de ruta.
En el siguiente ejemplo, en el nivel de zoom 16, los componentes del mapa de rutas se aplican el siguiente diseño:
- La arteria es roja.
- La autopista es azul.
- El contenido local es amarillo.
Cuando aumentas al nivel de zoom 17, los componentes del mapa de ruta cambian al componente del mapa de superficie, que tiene el diseño beige.
Para que la transición entre los diseños de componentes del mapa sea más fluida, puedes agregar diseños de nivel de zoom. Cuando usas diseños de nivel de zoom, puedes fijar los colores de diseño entre niveles de zoom específicos y también controlar cuándo realizar una transición fluida a un nuevo color de diseño.
Como se muestra en la siguiente figura, cuando agregas un diseño de nivel de zoom azul en el nivel de zoom 12 y un diseño de nivel de zoom beige en el nivel de zoom 17, ocurre lo siguiente:
- Las autopistas muestran el color azul en los niveles de zoom del 0 al 12.
- Después del nivel de zoom 12, el color azul comienza a desvanecerse en el color beige hasta que se produce la transición completa al color beige del diseño de las características del mapa de superficie en el nivel de zoom 17.
