Esta página muestra cómo personalizar su mapa y cambiar la presentación visual de elementos como carreteras, parques y edificios. Personaliza tu mapa utilizando las siguientes herramientas:
-
Herramientas basadas en la nube (Beta): Utiliza Google Cloud Console para crear y gestionar estilos de mapa y vincularlos a tus mapas mediante IDs de mapa. Puede crear nuevos estilos utilizando la herramienta de estilos o importar definiciones de estilos existentes. Cada vez que actualice un estilo, su página web se actualizará automáticamente con los cambios.
-
Declaraciones de estilo JSON: Para cada cambio de personalización de su mapa, utilice declaraciones de estilo JSON incrustadas para definir manualmente los estilos del mapa. El cambio de estas declaraciones de estilo requiere la actualización del código del lado del cliente que utiliza el dispositivo del usuario final para realizar operaciones y actualizar su página web.
Utilización de las herramientas basadas en la nube (Beta)
Las siguientes instrucciones muestran cómo utilizar la consola de Google Cloud para crear, personalizar, publicar y gestionar sus mapas en cualquier momento utilizando los ID de mapa y los estilos de mapa.
Para crear o gestionar cualquier ID de mapa o estilo de mapa en su proyecto de Google Cloud, debe tener el rol de IAM de Propietario de proyecto o Editor de proyecto.
Creación de ID de mapa
Un ID de mapa es un identificador único que representa una única instancia de un GoogleMap. Puede crear IDs de mapas y actualizar un estilo asociado a un ID de mapa en cualquier momento en Google Cloud Console sin cambiar el estilo JSON incrustado en el código de su aplicación.
Para crear un ID de mapa:
En la Cloud Console, vaya a la página de gestión de mapas.
Vaya a la página de gestión de mapas
Haga clic en Crear nuevo ID de mapa, para mostrar el formulario Crear nuevo ID de mapa.
En el formulario, haga lo siguiente:
- Especifique un nombre de mapa.
- Especifique un tipo de mapa o plataforma.
- Ingrese una descripción del mapa.
- Haga clic en Siguiente para mostrar el nuevo ID del mapa.
Usando los ID de mapa en el código de su aplicación
Para crear un mapa con un ID de mapa en el código de su aplicación:
Creando estilos de mapa
Un estilo de mapa es un identificador único para un conjunto de personalizaciones que puede asociarse a cualquier ID de mapa.
Para crear un nuevo estilo:
-
Haga clic en Crear nuevo estilo de mapa para abrir la página Nuevo estilo de mapa.
- En la página Nuevo estilo de mapa, puede:
- Personalizar la visualización de diferentes características del mapa:
- Seleccionar un estilo de mapa de una de las variaciones de estilo disponibles;Como alternativa, importar el código de estilo JSONpegando su código JSON en el cuadro de texto de la pestaña Cargar JSON.
- Abra el Editor de estilos haciendo clic en Personalizar en el Editor de estilos.
En el Editor de estilos, puede:
- Cambiar el estilo de las características de un mapa, como carreteras, masas de agua y corredores comerciales.
- Filtrar los puntos de interés a tipos de negocio específicos.
- Especificar la visualización de la densidad de los puntos de interés.
-
O bien, seleccione un Estilo de mapa personalizado para enfatizar los objetivos de una industria específica.
-
Para nombrar su Estilo de mapa y guardar los cambios, haga clic en Guardar.
- Personalizar la visualización de diferentes características del mapa:
En la Consola de Google Cloud, vaya a la página Estilos de mapa.
Vaya a Estilos de mapa
Actualización de los detalles del estilo
En la página Estilos de mapa, puede seleccionar un estilo de mapa para completar las siguientes acciones:
-
Continúe personalizando o vea los detalles del estilo en el Editor de estilos haciendo clic enPersonalizar estilo.
En el Editor de estilos, si asocia un ID de mapa con su estilo de mapa, al guardar y publicar se harán públicos los cambios de estilo para los mapas asociados. Guardar las personalizaciones de estilo sin publicar en el Editor de estilos no hará que los cambios sean visibles públicamente.
-
Nombre o edite una descripción para el estilo haciendo clic en Editar.
-
Duplique el estilo haciendo clic en Duplicar.
-
Eliminar el estilo haciendo clic en Eliminar.
-
Ver los ID de mapa asociados al estilo.
Los estilos creados antes del 15 de septiembre de 2020 no mostrarán las características naturales mejoradas de GoogleMaps. Para utilizar la compatibilidad con las características naturales mejoradas de Google Maps para el estilo de su mapa, debe crear un estilo de mapa.
Personalización en diferentes niveles de zoom
Puede personalizar el estilo de los elementos existentes en diferentes niveles de zoom al crear estilos de mapa con el editor de estilos en Google Cloud Console.
Por ejemplo, puede personalizar el color del agua desde el rosa en el nivel de zoom 0 hasta el morado en el nivel de zoom 10, y asociar otras personalizaciones con el nivel de detalle que se ve en el zoom especificado. Para probar esta función en una aplicación de ejemplo, consulte ID de mapa con estilo.
Para realizar personalizaciones de estilo en diferentes niveles de zoom:
- Abra el editor de estilos en Cloud Console. Para ello, visite la página Estilos de mapa y cree un estilo de mapa o actualice un estilo de mapa existente.
- Seleccione una característica en el submenú Tipo de característica para abrir el submenú Tipo de elemento y seleccione un elemento que desee personalizar.
- Marque la casilla Personalizar a través de los zooms para que las personalizaciones en el nivel de zoom actual aparezcan en el editor de estilos.
Una vez que seleccione la casilla Personalizar a través de los zooms, debería ver lo siguiente:
- Una casilla Añadir parada: z que indica su nivel de zoom actual y adjunta las personalizaciones al nivel de zoom indicado.
- Una barra deslizante de zoom para modificar y seleccionar su nivel de zoom. Puede ajustar los niveles de zoom con los controles de zoom booleanos del mapa, la rueda del ratón o las teclas de flecha del teclado.
-
Cuando realiza personalizaciones en el submenú Estilos, el editor de estilos selecciona automáticamente la casilla de verificación Añadir parada: z, muestra un punto azul sobre el deslizador y anula cualquier estilo heredado.
El punto azul sobre el deslizador indica que los cambios se han realizado en el nivel de zoom seleccionado. Para evitar que los cambios se guarden en un nivel de zoom concreto, desactive la casilla Añadir parada: z (el punto azul se vuelve gris para indicar que los cambios no se guardarán en ese nivel). Después de desactivar la casilla de verificación, el elemento vuelve a su estilo heredado.
Cualquier personalización que realice en un nivel de zoom actualizará las personalizaciones en los niveles de zoom indicados y superiores. Por ejemplo, las personalizaciones en el nivel de zoom 10 afectan a todas las personalizaciones en los niveles de zoom 10, 11, 12 y así sucesivamente.Las personalizaciones anulan cualquier estilo heredado.
-
Para guardar los cambios, haga clic en Guardar. Para hacer públicos los cambios en los ID de mapa asociados a su estilo de mapa, haga clic en Publicar.
Utilización de declaraciones de estilo JSON incrustadas
Puede aplicar estilos personalizados a través de una declaración de estilo JSON incrustada a lo siguiente:
- Mapa predeterminado.
- Tipos de mapa entre los que un usuario puede cambiar dentro de un único marco de mapa.
- Creando tu mapa.
- O al llamar al método
Map.setOptions. - Aprenda a utilizar mapas vectoriales con el estilo de mapa basado en la Nube.
- Aprenda a personalizar el comportamiento de los puntos de interés utilizando el estilo de mapa basado en la Nube.
- Para evitar que los negocios, los puntos de interés y otras características aparezcan en un mapa utilizando una declaración de estilo JSON incrustada, consulte el ejemplo de código Ocultar características del mapa con estilo.
- Cree una leyenda personalizada utilizando declaraciones de estilo JSON incrustadas.
Especificación de estilos a características
Para aplicar estilos a diferentes características y elementos de un mapa, cree una matriz deMapTypeStyleobjetos que definan cómo debe ser el estilo del mapa.
La matriz tiene la siguiente forma:
Para obtener una lista de todos los valores disponibles para featureTypeelementType, ystylers, consulte la referencia de estilo JSON.
Asistente de estilización de la plataforma de mapas
Utilice el asistente de estilización de la plataforma de mapas como una forma rápida de generar un objeto de estilización JSON.
Aplicación de estilos a un mapa predeterminado
A continuación se muestra un ejemplo de mapa predeterminado estilizado utilizando texto e iconos de color claro sobre un fondo oscuro (es decir, modo oscuro). Para ver la muestra de código, vaya aMapas con estilo – Muestra de código en modo nocturno.
Para modificar los estilos del mapa por defecto, establece la propiedad styles del objetoMapOptions a tu matriz de estilos cuando:
Los cambios en las etiquetas y las carreteras afectan a todos los tipos de mapa, incluidos los tipos de terreno, satélite, híbrido y mapa de carreteras por defecto.
Aplicar estilos a un tipo de mapa
A continuación se muestra un tipo de mapa añadido llamado Styled Map en el control de la parte superior izquierda del mapa. Para ver el ejemplo de código, vaya a Tipos de mapa con estilo.
Para crear un tipo de mapa con estilo, establezca la matriz de estilos en un objeto StyledMapType. La creación de un nuevo tipo de mapa con estilo no afecta al estilo de los tipos de mapa predeterminados.
- .