Se usó la API de Cloud Translation para traducir esta página.

Diseño de mapas basado en Cloud

Google Maps Platform ofrece funciones de diseño de mapas basado en la nube que facilitan el diseño, la personalización y la administración de tus mapas a través de la consola de Google Cloud, lo que te permite crear una experiencia de mapa personalizada para tus usuarios sin tener que actualizar el código de tus apps cada vez que realices un cambio de diseño.

Los diseños creados antes del 15 de septiembre de 2020 no muestran los componentes naturales mejorados de Google Maps. Para aprovechar la compatibilidad de dichos componentes de Google Maps, tienes que crear un diseño de mapa.

El diseño de mapas basado en Cloud te permite crear y editar diseños de mapa para cualquiera de tus apps que usen Google Maps, sin necesidad de realizar cambios en tu código una vez que el ID de mapa esté implementado. Todos los cambios de diseño se pueden realizar en la consola de Cloud, y no hace falta tener conocimientos de programación para implementarlos. Cambia la apariencia y el color de muchos elementos del mapa, como rutas, edificios, masas de agua, lugares de interés y rutas de transporte público.

Entre estas funciones, se incluyen las siguientes:

Diseño de mapas basado en Cloud: En lugar de modificar el diseño de tus mapas por medio del código en formato JSON, puedes administrar y diseñar tus mapas dinámicos o estáticos en la consola de Cloud con los IDs y los diseños de mapa.
Mapa de vectores: Los desarrolladores de JavaScript pueden elegir usar el mismo mapa basado en vectores acelerado con WebGL que está disponible en maps.google.com directamente en sus propias apps web.
Filtros para lugares de interés comerciales: Opcionalmente, se pueden quitar cinco categorías de lugares de interés comerciales para que no se muestren en el mapa.
Control de densidad de los lugares de interés: Se puede ajustar la densidad de los lugares de interés en el mapa base para que se muestren en mayor o menor medida de forma predeterminada.

Si bien el diseño de mapas basado en la nube está disponible en el SDK de Maps para Android¹, el SDK de Maps para iOS, el JavaScript y la API de Maps Static, no todas las funciones son visibles en todas las plataformas.

Antes de comenzar

Crea un ID de mapa.
Para usar el diseño de mapas basado en Cloud, tu mapa se tiene que cargar con un ID de mapa.
Actualiza a partir del diseño hard-coded. Antes de agregar un ID de mapa para usar el diseño de mapas basado en Cloud en un mapa existente personalizado con un diseño hard-coded, como los parámetros de consulta JSON o URL, quita el diseño hard-coded para evitar un posible conflicto con funciones futuras. Puedes importar el diseño de JSON en un diseño de mapa nuevo.
- En Android, actualiza las MapStyleOptions.
- En iOS, actualiza la clase GMSMapStyle.
- En JavaScript, quita el diseño MapTypeStyle.
- En Maps Static, quita el parámetro style.

* Actualiza el SDK de Maps para Android
Para aprovechar el diseño de mapas basado en la nube, debes usar la versión 18.0.0 o posterior del SDK de Maps para Android y la versión más reciente del procesador del SDK de Maps para Android.

Facturación

El diseño de mapas basado en Cloud requiere un ID de mapa. En el caso del SDK de Maps para Android, el SDK de Maps para iOS y JavaScript, el uso de un ID de mapa genera un cargo en función del SKU de Dynamic Maps. En la API de Maps Static, el uso de un ID de mapa genera un cargo en función del SKU de Static Maps.

Ejemplos

Android

Cómo ejecutar la app de ejemplo ApiDemos

Para ejecutar la app de ejemplo ApiDemos, consulta la muestra de GitHub (Java | Kotlin) y mira la demostración de CloudBasedMapStylingDemoActivity (Java | Kotlin).

Puedes encontrar apps de ejemplo Java y Kotlin que demuestren cómo modificar el diseño de tu mapa para Android desde la nube.

Problemas conocidos

Una vez que tu app se publica, los diseños de mapa personalizados que tienen IDs de mapa asociados se pueden actualizar desde la consola de Google Cloud. Los nuevos diseños se reflejarán en tu app después de unas horas.

Para asegurarte de que los nuevos diseños personalizados se muestren inmediatamente con fines de prueba, borra los datos de la app en tu dispositivo de prueba. Para obtener más información sobre cómo borrar datos de tu dispositivo, consulta la Ayuda de Android: Cómo liberar espacio.

Ten en cuenta que la configuración puede variar según el teléfono. Para obtener más información, comunícate con el fabricante de tu dispositivo.

iOS

Cómo ejecutar la app de ejemplo ApiDemos

Para ejecutar la app de ejemplo ApiDemos, consulta el ejemplo de GitHub App de ejemplo de Google Maps y consulta el proyecto CloudBasedMapStylingViewController (ejemplo de GitHub para Swift | Objective-C).

Demostración opcional de GitHub o CocoaPod para el diseño de Cloud

En lugar de comenzar desde cero, puedes probar nuestra aplicación de ejemplo de Objective-C, que demuestra cómo modificar el estilo de tu mapa para iOS desde la nube aquí.

Cómo compilar la app de demostración de la versión beta

En Xcode, presiona el botón de compilación y luego ejecuta el esquema actual. La compilación produce un error y te solicita ingresar tu clave de API en el archivo SDKDemoAPIKey.h.

Si aún no tienes una clave de API, sigue estas instrucciones para configurar un proyecto en la consola de Cloud y obtener una clave de API. Cuando configuras la clave en Cloud Console, puedes especificar el identificador de paquete de tu app para asegurarte de que solo tu app pueda usar la clave. El identificador de paquete predeterminado de la app de muestras del SDK es com.example.GoogleMapsDemos.

Edita el archivo SDKDemoAPIKey.h y pega tu clave de API en la definición de la constante kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Si Xcode te solicita desbloquear el archivo SDKDemoAPIKey.h para editarlo, elige Desbloquear.

Quita la siguiente línea:

```
#error Register for API Key and insert here.
```

Compila y ejecuta el proyecto.

Demostración de mapas basados en Cloud

En la demostración de CloudStyling, se muestra cómo aplicar diseño al mapa mediante un conjunto de diseños en la consola de Google Cloud.

Cuando se inicie la aplicación de demostración, haz clic en la demostración de personalización de mapas, en la sección Muestras de Beta, en la parte superior de la lista.

Haz clic en Mapa de estilo para ver el efecto que tiene cargar diferentes ID de mapa.

También puedes intentar agregar tu propio diseño ("Mapa de estilo" > "Agregar un ID de mapa nuevo") y ver la actualización del mapa con tu mapa con diseño personalizado.

JavaScript

Este es un ejemplo básico sobre cómo cargar un mapa con diseño personalizado con un ID de mapa. En este caso, el código JavaScript de Maps hace referencia al ID de mapa 8e0a97af9386fef cuando se carga el mapa y aplica automáticamente el diseño de mapa que actualmente está asociado con ese ID.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

API de Maps Static

Un ID de mapa es un identificador asociado con un estilo o un elemento específico del mapa. Configura un estilo de mapa y asócialo con un ID de mapa en Google Cloud Console. Luego, cuando hagas referencia a un ID de mapa en tu código, se mostrará el estilo de mapa asociado en tu app. Las actualizaciones de estilo posteriores que realices aparecerán en la app automáticamente, sin necesidad de que los clientes realicen actualizaciones.

Si usas el diseño de mapas basado en Cloud con un mapa existente personalizado con el parámetro style, asegúrate de quitarlos para evitar posibles conflictos con la funcionalidad futura.

Para agregar un ID de mapa a un mapa nuevo o existente que utilice una de nuestras APIs web, agrega el parámetro de URL map_id y configúralo con tu ID de mapa. En este ejemplo, se muestra cómo agregar un ID de mapa a un mapa con la API de Maps Static.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

El diseño de mapas basado en Cloud no está disponible en el modo lite de Android. ↩