Crea y usa diseños de mapa

Selecciona la plataforma: Android Android 3D iOS iOS 3D JavaScript Servicio web

Un diseño de mapa es un conjunto de personalizaciones visuales sobre los componentes de mapa que se pueden asociar a un ID de mapa. Luego, debes hacer referencia al ID de mapa en el código de la aplicación para mostrar el mapa personalizado.

Puedes crear un diseño de mapa antes de tener un ID de mapa, pero, para utilizarlo, debes asociarlo con un ID de mapa. Para usar un diseño de mapa, debes seguir todos los pasos que se indican a continuación:

1. Crea y publica un diseño de mapa. Para obtener más detalles, consulta Cómo crear un diseño y Cómo publicar un diseño.

2. Crea un ID de mapa. Para obtener más detalles, consulta Crea un ID de mapa.

3. Asocia el diseño de mapa a un ID de mapa. Para obtener más detalles, consulta Cómo asociar un ID de mapa a un diseño de mapa.

4. Agrega el ID de mapa a tu app para mostrar tu diseño. Para obtener más detalles, consulta Agrega el ID de mapa a tu app.

Nota: Una vez que el ID de mapa se encuentre incluido en el código de la aplicación, podrás cambiar el diseño del mapa sin implementar cambios en el código, y los usuarios finales no necesitarán realizar actualizaciones para ver el nuevo diseño. En cambio, puedes editar el diseño de mapa asociado con el ID de mapa, y los cambios aparecerán en los mapas de tus aplicaciones.

En este documento, se describe cómo crear, editar y publicar diseños de mapa, y cómo asociarlos a un ID de mapa.

Cómo crear un diseño de mapa

Puedes crear un diseño de mapa con uno de estos métodos:

• Crea un diseño nuevo usando el diseño de mapa de Google Maps predeterminado.

• Copia y modifica un estilo personalizado existente.

• Importar un diseño de mapa JSON para usarlo como estilo personalizado

Cómo crear un diseño nuevo

1. En la consola de Google Cloud, ve a Diseños de mapa y selecciona un proyecto si es necesario.

2. En Diseños de mapa, haz clic en Crear diseño.

3. En el cuadro de diálogo, en la pestaña Estilos de Google, selecciona un modo.

   • Claro crea un estilo de tema claro, ideal para entornos luminosos o al aire libre.
   • Oscuro crea un estilo de tema oscuro, ideal para entornos con poca luz.

   Para obtener más información sobre los estilos de los modos claro y oscuro, consulta Información sobre los modos y los tipos de mapas.

4. (Opcional) Para aplicar una variación de tema a tu diseño de mapa, en Tema opcional, selecciona una de las siguientes opciones:

   • Monocromático: Crea una versión en escala de grises del diseño de mapa.
   • Ambient: Crea una versión silenciada del diseño de mapa. Esta opción solo está disponible si tu proyecto tiene habilitado el SDK de Navigation.

   Como alternativa, puedes hacer clic en la pestaña JSON para importar un diseño de mapa JSON.

   

5. Selecciona Personalizar para crear un estilo nuevo sin título.

6. Selecciona los componentes de mapa que desees y cambia su diseño de mapa según tus necesidades.

   Los componentes de mapa con diseños personalizados tienen un punto azul a su lado. Si personalizas un estilo secundario, el estilo superior mostrará un círculo azul. Para obtener más información sobre la jerarquía de los diseños de mapa, consulta Conceptos básicos sobre la herencia y la jerarquía de los diseños de mapas.

   Nota: No todos los diseños se muestran en todos los niveles de zoom. Para obtener más información, consulta Niveles de zoom de los diseños.

7. Haz clic en Guardar.

8. En el cuadro Guardar y publicar el diseño de mapa, ingresa el nombre de tu diseño y, opcionalmente, una descripción, y haz clic en Guardar.

El diseño se publicará automáticamente, y podrás ver la página de detalles de tu nuevo diseño.

Precaución: Si realizas cambios en el diseño, pero no los guardas de forma explícita, se generarán Cambios sin guardar en el historial de versiones de tu diseño de mapa. Esas versiones se perderán si cierras la pestaña del navegador o si finaliza tu sesión en la consola de Cloud.

Cómo copiar un estilo

1. Ve a Diseños de mapa y selecciona un proyecto (si es necesario).

2. Selecciona uno de tus diseños existentes.

3. En la página de estilo, haz clic en Crear una copia.

4. En el cuadro de diálogo Crear una copia, ingresa un nombre nuevo para el diseño de mapa y, de manera opcional, una descripción.

5. (Opcional) Para crear la versión complementaria en modo oscuro o claro del diseño copiado, selecciona la casilla de verificación en la sección Opciones del modo de diseño.

6. Haz clic en Guardar.

   El diseño se publicará automáticamente, y podrás ver la página principal de tu nuevo diseño. Asocia el diseño a un ID de mapa para poder usarlo en tus mapas. Para obtener más detalles, consulta Cómo asociar un ID de mapa a un diseño de mapa.

7. Si deseas modificar el diseño, haz clic en Personalizar, aplica los cambios que desees y haz clic en Guardar.

Cómo publicar un diseño

Cuando creas un diseño de mapa nuevo, esa primera instancia se publica automáticamente. Luego, podrás guardar los cambios como borrador y publicar el diseño posteriormente, cuando te sientas a gusto con los cambios.

1. Aplica cambios al diseño de mapa (original o duplicado). Para obtener más detalles, consulta Cómo cambiar un diseño.

2. Haz clic en Guardar para guardar los cambios como borrador.

3. Cuando los cambios estén listos y desees publicarlos en un ID de mapa que use ese diseño de mapa, haz clic en Publicar.

Diseños de mapa publicados y borradores

Diseño publicado: Es un diseño de mapa publicado. Cualquier mapa que use el diseño de mapa mostrará la versión publicada.

Nota: Los cambios de diseño pueden demorar algunas horas para propagarse en tus apps y sitios web, y las apps pueden demorar más tiempo si los dispositivos no están conectados a Internet. Si no ves los cambios de diseño después de algunas horas, consulta Mis cambios de diseño no se están actualizando.

Borrador: Las versiones de borrador de los diseños de mapa se encuentran en proceso y no se muestran en los mapas si no las publicas.

Cómo cambiar un diseño

Si quieres realizar cambios en tu diseño de mapa, puedes hacerlo desde el Editor de diseños. Cuando actualizas un diseño, tienes varias opciones:

• Si quieres que los cambios se publiquen no bien terminas de realizarlos: Haz clic en Personalizar y aplica los cambios. Haz clic en Guardar para guardar los cambios como borrador y, luego, en Publicar cuando termines.

• Si quieres probar los cambios en un entorno de pruebas antes de publicarlos: En vez de aplicar los cambios directamente en el diseño de mapa, primero duplica el primer diseño. Para obtener más detalles, consulta Cómo copiar un diseño y Prueba las actualizaciones de diseño de mapa.

Una vez que hayas creado un diseño de mapa, puedes aplicarle cambios desde la página de detalles del diseño de las siguientes maneras:

• Editar: Haz clic en Personalizar.

• Crear una copia: Para obtener más detalles, consulta Cómo copiar un diseño.

• Cambiar nombre: Cambia el nombre de tu diseño de mapa.

• Borrar: Borra el diseño de mapa.

Asocia tu estilo a un ID de mapa

Asocia tu estilo a un ID de mapa para mostrar tu estilo personalizado en tu sitio web y en tu app. Un ID de mapa solo puede tener un estilo de modo claro y un estilo de modo oscuro asociados.

Para cambiar los estilos asociados de un ID de mapa, haz lo siguiente en la consola de Google Cloud:

1. Ve a Administración de mapas y selecciona un ID de mapa.

2. En la sección Diseños de mapa, haz clic en Editar para el modo claro o el modo oscuro.

3. En el panel, selecciona un estilo para asociarlo con este ID de mapa.

   Nota: El panel solo muestra estilos con un tipo de estilo claro para el modo claro y solo estilos con un tipo de estilo oscuro para el modo oscuro.

4. Haz clic en Listo.

5. (Opcional) Aplica tu estilo a diferentes tipos de mapas.

   De forma predeterminada, tu estilo se aplica a todos los tipos de mapas disponibles (roadmap, navigation, terrain, hybrid, 3D roadmap y 3D hybrid). Para aplicar tu estilo a tipos de mapas específicos, haz clic en Mostrar más y selecciona la casilla de verificación de cada tipo de mapa que aparece en la lista para los modos claro y oscuro. Para aplicar el diseño de mapa de Google Maps predeterminado para ese modo, desmarca la casilla de verificación de un tipo de mapa.

   Para obtener más información sobre los tipos de mapas, consulta Obtén información sobre los modos y los tipos de mapas.

6. Haz clic en Guardar para aplicar todos los cambios.

Para usar tu diseño de mapas basado en Cloud, agrega el ID de mapa a tu app.