Abre la función de diseño de mapas basado en Cloud
Ve a la consola de Google Cloud y selecciona Diseños de mapa. Selecciona o crea un proyecto si es necesario.
Selecciona Crear diseño.
En la parte inferior del diálogo, selecciona Personalizar.
Aplica diseño a una red de rutas
En Componentes de mapa, expande Infraestructura y, luego, selecciona Red de rutas.
En el panel que aparece a la derecha, selecciona Polilínea (Polyline), luego, Color de relleno (Fill color) y, finalmente, marca la casilla de color.
Elige un color brillante. Si cambias el color, la casilla Color del relleno se marcará automáticamente.
En Ancho de trazo, establece el ancho del trazo en 5 px.
En el mapa, acércate y aléjate para ver el efecto de tus cambios. Dado que seleccionaste un componente de mapa con una jerarquía relativamente alta, todos los tipos de rutas inferiores heredarán los cambios.
Guarda y publica tu diseño de mapa
En la esquina superior derecha, selecciona Guardar.
En Guardar y publicar el diseño de mapa (Save and publish map style), ingresa un nombre y, opcionalmente, una descripción para tu diseño de mapa.
Selecciona Guardar. El mapa se guardará y se publicará.
Paso 2: Crea y conecta un ID de mapa
Un ID de mapa te permite utilizar tu diseño de mapa en apps y sitios web. Si modificas el diseño de mapa asociado a un ID de mapa, los cambios de diseño se mostrarán cuando publiques el mapa, de modo que no necesitas ningún software ni actualización de la app.
Crea un ID de mapa
En la consola de Google Cloud, selecciona Administración de mapas.
En la parte superior, selecciona Crear ID de mapa.
Agrega un nombre para tu ID de mapa y, opcionalmente, una descripción.
Selecciona el tipo de mapa del ID de mapa según dónde deseas utilizarlo.
En la parte inferior de la página, selecciona Guardar. Tu ID de mapa estará listo.
Conecta el ID de mapa a tu diseño de mapa
En Diseño de mapa, selecciona Cambiar diseño junto a Claro.
En Cambiar el diseño de luz, elige qué diseño de mapa usar para el modo claro en tus apps y selecciona Listo.
Repite el proceso seleccionando Cambiar diseño junto a Oscuro y elige un diseño de mapa en modo oscuro.
Selecciona Guardar. Ahora tu ID de mapa está asociado a tus diseños de mapa.
Paso 3: Agrega el ID de mapa a tus apps y sitios web
Ahora que ya tienes un ID de mapa asociado a un diseño de mapa publicado, puedes agregarlo a tus apps o sitios web y probarlo para asegurarte de que funcione correctamente.
Actualiza un diseño. Aplica cambios a tu diseño de mapa y publícalo. Observa cómo los cambios se muestran automáticamente en tus apps y sitios web. Si deseas probar los cambios antes de publicarlos, consulta Prueba las actualizaciones de diseño de mapa.
Usa la jerarquía de los componentes del mapa para establecer de manera eficiente los diseños que desees.
Por ejemplo, puedes aplicar diseño al componente de mapa superior Natural > Tierra, y todos los componentes de esta categoría lo heredarán. Luego, puedes aplicar diseño personalizado solo en los componentes de mapa secundarios que deseas que sean diferentes.
[null,null,["Última actualización: 2025-08-31 (UTC)"],[],[],null,["# Tutorial - Highlight a road network\n\nSelect platform: [Android](/maps/documentation/android-sdk/cloud-customization/tut \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/tut \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/tut \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/tut \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\n| To use cloud-based maps styling on Android, you must use the latest renderer for Maps SDK for Android. [Follow these instructions](/maps/documentation/android-sdk/renderer).\n\nThis tutorial walks you through the steps to create and use a map style that\nhighlights the road network:\n\n1. **[Create and publish a map style](#tut1)** so it's available to use.\n\n2. **[Create and connect a map ID](#tut2)** that lets you use your style in\n apps and websites.\n\n3. **[Add the map ID to your apps and websites](#tut3)** so your apps use\n your map style.\n\nStep 1: Create and publish a map style\n--------------------------------------\n\n### Open cloud-based maps styling\n\n1. Go to the Google Cloud console, and select [**Map Styles**](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles). Select or create a project, if needed.\n\n2. Select **Create Style**.\n\n3. At the bottom of the dialog, select **Customize**.\n\n### Style the Road network\n\n1. Under **Map Features** , expand **Infrastructure** , then select **Road\n network**.\n\n2. On the panel that pops up on the right, under **Polyline** ,\n then **Fill color**, select the color box.\n\n3. Choose a bright color. Changing the color automatically checks\n the **Fill color** box.\n\n | **Note:** A solid dot appears next to the map feature to indicate it has a custom style.\n4. Under **Stroke width**, set the stroke width to 5px.\n\n5. On the map, zoom in and out to see the effect of your changes. Because\n you selected a map feature that is relatively high in the hierarchy,\n all road types underneath it have inherited your changes.\n\n### Save and publish your map style\n\n1. At the top right, select **Save**.\n\n2. In **Save and publish map style**, enter a name and, optionally, a\n description for your map style.\n\n3. Select **Save**. Your map style is saved and published.\n\n| **Note:** The first time you save a map style, it is published automatically since it's the first version. When you subsequently update a map style, you can save changes as drafts as you go, and then publish when you're finished and want the style updated.\n\nStep 2: Create and connect a map ID\n-----------------------------------\n\nA map ID lets you use your map style on apps and websites. If you make changes\nto the map style associated with a map ID, your style changes\ngo live when you publish, so no software or app updates are needed.\n\n### Create a map ID\n\n1. In the Google Cloud console, select **Map Management**.\n\n2. At the top, select **Create map ID**.\n\n3. Add a name for your map ID, and optionally, a description.\n\n4. Select the map type for the map ID, depending on where you want to use your\n map style.\n\n | **Note:** If you want to use your map style for different types of applications or websites, create a new map ID for each type, and then connect them all to the same map style.\n5. At the bottom of the page, select **Save**. Your map ID is created.\n\n### Connect the map ID to your map style\n\n1. Under **Map style** , select **Change style** next to **Light**.\n\n2. Under **Change light style** , choose what map style to\n use for light mode in your apps, and select **Done**.\n\n3. Repeat by selecting **Change Style** next to **Dark** and select a dark\n mode map style.\n\n | **Note:** If you don't select a dark style, or have not created any dark mode map styles, you can select the Google default dark map style.\n4. Select **Save**. Your map ID is now associated with your map styles.\n\nStep 3: Add the map ID to your apps or websites\n-----------------------------------------------\n\nNow that you have a map ID that is associated with a published map style,\nyou can add it to your apps or websites and test to make sure it functions\nas expected.\n\nFor more information about adding a map ID, see\n[Add the map ID to your map](/maps/documentation/get-map-id#add-a-map-id-to-your-app).\n\nWhat's next\n-----------\n\nHere are some things you can try next:\n\n- **Update a style** . Make changes to your map style and publish it,\n and see the changes show up automatically in your apps and websites. If you\n want to test your changes before they go live, see\n [Test map style updates](/maps/documentation/android-sdk/cloud-customization/test-style-updates).\n\n- **Use the map feature hierarchy to efficiently get the styles you want** .\n For example, you can style the high-level map feature **Natural\\\u003eLand**,\n and all of the land map features under it inherit the styling. You can\n then do custom styling on just the child map features that you want to\n be different."]]
