diseño de mapas basado en Cloud

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

Los estilos creados antes del 15 de septiembre de 2020 no mostrarán los elementos naturales mejorados de Google Maps. Debes crear un estilo de mapa para poder utilizar dichos elementos compatibles.

El diseño de mapas basado en Cloud te permite crear y editar estilos de mapa para cualquiera de las apps que usan Google Maps, sin la necesidad de cambiar el código una vez que se haya implementado el ID de mapa. Todos los cambios de estilo se pueden realizar en la consola de Cloud, no se necesitan conocimientos de programación. 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 mediante el 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 estilos de mapa.
  • Mapa vectorial: los desarrolladores de JavaScript pueden elegir usar el mismo mapa basado en vectores acelerado por WebGL que está disponible en maps.google.com directamente en sus propias aplicaciones web.
  • Filtros para los lugares de interés comerciales: Opcionalmente, se pueden quitar cinco categorías de este tipo de lugares para que no se muestren en el mapa.
  • Control de densidad de los lugares de interés: Se puede ajustar la densidad de este tipo de lugares en el mapa base para que se muestren en mayor o menor medida de forma predeterminada.

El diseño de mapas basado en Cloud está disponible en SDK de Maps para Android1, SDK de Maps para iOS, JavaScript y API de Maps Static, no todas las funciones serán visibles en todas las plataformas.

Antes de comenzar

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

Facturación

El diseño de mapas basado en Cloud requiere un ID de mapa. En el SDK de Maps para Android, el SDK de Maps para iOS y JavaScript, el uso de un ID de mapa genera un cargo en el 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 muestra ApiDemos, consulta la muestra de GitHub (Java | Kotlin) y la demostración CloudBasedMapStylingDemoActivity (Java | Kotlin).

Puedes encontrar una aplicación de muestra de Java y Kotlin que demuestre cómo diseñar tu mapa de Android desde la nube.

Problemas conocidos

Una vez que se entrega tu app a los clientes, los estilos de mapa personalizados que tienen IDs de mapa asociados se pueden actualizar desde la consola de Google Cloud. Los nuevos estilos se reflejarán en tu app, en unas horas.

Para asegurarte de que los nuevos estilos personalizados aparezcan de inmediato a fin de probarlos, borra los datos de 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 muestra de ApiDemos, consulta la muestra de GitHub de la app de muestra de GoogleMap y el proyecto CloudBasedMapStylingViewController (muestra de GitHub para Swift | Objective-C).

Demostración opcional de CocoaPod o GitHub de diseño de nube

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

Cómo compilar la app de demostració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 Cloud Console 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 la app pueda usarla. El identificador del 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, selecciona Desbloquear.

Quita la siguiente línea:

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

Compila y ejecuta el proyecto.

Demostración de diseño de mapas basado en la nube

En la demostración de CloudStyling, se muestra cómo diseñar el mapa mediante un conjunto de estilos en Google Cloud Console.

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

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

También puedes intentar agregar tu propio estilo (mapa de estilos > Agregar un ID de mapa nuevo) y ver la actualización del mapa con tu mapa con estilos personalizados.

JavaScript

Este es un ejemplo básico de carga de un mapa con estilo personalizado mediante un ID de mapa. En este caso, el JavaScript de Maps hace referencia al ID de mapa 8e0a97af9386fef cuando se carga el mapa y aplica automáticamente el estilo de mapa actualmente 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;

JavaScript

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

window.initMap = initMap;
Ver ejemplo

Probar la muestra

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.

  1. Si usas el estilo de mapas basado en la nube con un mapa existente que se personaliza con el parámetro style, asegúrate de quitarlos para evitar posibles conflictos con funcionalidades futuras.

  2. Para agregar un ID de mapa a un mapa nuevo o existente que use una de nuestras API web, agrega el parámetro de URL map_id y configúralo en 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" />
    


  1. El estilo de mapas basado en la nube no está disponible en el modo lite de Android