Crea y usa diseños de mapa

Selecciona la plataforma: Android iOS JavaScript Servicio web

Un diseño de mapa es un conjunto de personalizaciones visuales sobre los componentes de mapa que asocias 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.

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.

  • Duplica y modifica un diseño estándar o personalizado existente.

  • Importa un diseño de mapa JSON para usarlo como un diseño 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 diálogo, en la pestaña Estilos de Google, selecciona una de las siguientes opciones:

    • Light para crear un diseño de mapa claro, en el que el tipo de mapa es de ruta.
    • Oscuro para crear un diseño de mapa oscuro, en el que el tipo de mapa es de hoja de ruta oscuro.
  4. (Opcional) Para aplicar la variación monocromática a tu diseño de mapa, selecciona Monocromático.

    Punto y círculo azules que indican un diseño personalizado y el diseño principal

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

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

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

  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 principal de tu nuevo diseño.

Cómo duplicar un diseño

  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 del diseño, haz clic en Duplicar.

  4. En el cuadro Duplicar diseño de mapa, ingresa el nuevo nombre del mapa y, opcionalmente, una descripción.

  5. 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.

  6. Si deseas modificar el diseño, haz clic en Personalizar, realiza los cambios y, luego, haz clic en Guardar.

Cómo importar un diseño de mapa JSON

Como alternativa, puedes crear un estilo de mapa con JSON. Para obtener información sobre las propiedades que puedes diseñar con JSON, consulta la referencia de diseño JSON.

  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 diálogo, selecciona la pestaña JSON.

  4. Pega el código de diseño JSON válido en el campo.

    • Si tu archivo JSON no es válido, aparecerá la advertencia "No se pudo cargar la vista previa del diseño".
    • Si tu archivo JSON es válido, obtendrás una vista previa del diseño pegado y estará disponible el botón azul Personalizar.
  5. Haz clic en Personalizar.

  6. Selecciona los componentes de mapa y revisa o cambia su diseño según sea necesario para crear el diseño de mapa que desees. Los componentes de mapa con diseños personalizados tienen un punto azul a su lado.

  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 principal de tu nuevo diseño.

Cómo publicar un diseño

Cuando creas un diseño de mapa nuevo, lo que incluye duplicar un diseño existente, o bien importar un diseño JSON, esa primera instancia del diseño de mapa nuevo 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) que desees publicar. Para obtener más detalles, consulta Cómo cambiar un diseño.

  2. Mientras sigues realizando cambios, haz clic en Guardar.

  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 Guardar y, luego, en Publicar.

Diseños de mapa publicados y borradores

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

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 termines de realizarlos: Haz clic en Personalizar y aplica los cambios. Haz clic en Guardar para guardar los cambios como borrador y, luego, haz clic 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 duplicar 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 principal del diseño de las siguientes maneras:

  • Editar: Haz clic en Personalizar.

  • Duplicar: Para obtener más detalles, consulta Cómo duplicar un diseño.

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

  • Borrar: Borra el diseño de mapa.

Asocia tu diseño a un ID de mapa

Asocia tu diseño a un ID de mapa para mostrar tu diseño personalizado en tu sitio web y en tu app. Un ID de mapa solo puede tener asociado un diseño claro (tipo de mapa de ruta) y un diseño oscuro (tipo de mapa de ruta oscuro).

Para cambiar el estilo asociado a un ID de mapa, haz lo siguiente en Google Cloud Console:

  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 Cambiar diseño para seleccionar un diseño de mapa claro u oscuro.

    El panel solo muestra diseños con un tipo de mapa de hoja de ruta para los diseños claros y solo diseños con un tipo de mapa oscuro de hoja de ruta para los diseños oscuros.

  3. En el panel, selecciona uno de los diseños para asociarlo a este ID de mapa.

  4. Haz clic en Listo.

  5. 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.

Puedes navegar por el mapa de vista previa de la misma manera que navegas por cualquier mapa de Google Maps:

  • Ingresa una dirección o ubicación en el cuadro Buscar dirección.

  • Haz clic en la brújula para centrar el mapa en esa ubicación. También es posible que tengas que otorgar permisos de ubicación.

  • Arrastra el mapa para cambiar de lugar.

  • Acerca o aleja el mapa con los botones de signo más (+) y signo menos (−).

Cómo buscar componentes de mapa

Para encontrar un componente de mapa al que desees aplicar ajustes de diseño, puedes usar el filtro o el inspector de mapas.

También puedes expandir y contraer las categorías de componentes de mapa para buscar el componente que deseas. Consulta la lista de componentes de mapa en ¿Qué elementos de diseño puedes personalizar en un mapa?

Cómo filtrar componentes del mapa

Para buscar componentes de mapa con el filtro, en Componentes del mapa, ingresa un término en el cuadro Filtro.

Si no encuentras un componente de mapa, ten en cuenta lo siguiente:

  • No uses términos en plural. Todas las categorías se presentan en singular.

  • Prueba con un término más genérico para el componente. Por ejemplo, en vez de "pizzería" o "comida rápida", busca "restaurante".

  • Prueba con una categoría más amplia y, luego, explórala para hallar el componente de mapa más próximo. Por ejemplo, en vez de "teatro", busca "entretenimiento".

Inspecciona los elementos del mapa

Para encontrar componentes del mapa con el inspector de mapas, sigue estos pasos:

  1. Haz clic con el botón izquierdo en cualquier parte del mapa para abrir el inspector en el punto donde hiciste clic.

    El inspector de mapas se abre sobre el Space Needle y muestra seis componentes del mapa en ese punto de clic: lugar de interés, parque, corredor comercial, área urbana, arbusto y base.

  2. Selecciona un componente de mapa en el inspector de mapas para abrirlo en el panel Componentes del mapa.

    El componente de mapa Landmark está seleccionado en el inspector de mapas y el panel Componentes del mapa se expande para mostrar los elementos de diseño personalizables.