Ejemplos de diseños heredados

Android

Cómo ejecutar la app de ejemplo de ApiDemos

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

Puedes encontrar apps de ejemplo de 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 los parámetros de 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 de ApiDemos

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

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

En lugar de comenzar desde cero, puedes probar nuestra aplicación de ejemplo de Objective-C, que muestra cómo modificar el diseño de tu mapa para iOS desde la nube. Para obtener más detalles, consulta la muestra de Objective-C.

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 genera un error que te solicita ingresar tu clave de API en el archivo SDKDemoAPIKey.h.

Si aún no tienes una clave de API, configura un proyecto en la consola de Cloud y obtén una clave de API; para ello, sigue las instrucciones que se indican en Cómo obtener una clave de API. Cuando configuras la clave en la consola de Cloud, 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 ejemplos 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 del diseño basado en Cloud

En la demostración de CloudStyling, se muestra cómo aplicar diseño al mapa con 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 Beta, en la parte superior de la lista.

Haz clic en Mapa de diseños para ver el efecto de cargar diferentes IDs de mapa.

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

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

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 utilizas 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 componentes futuros.

  2. Para agregar un ID de mapa a un mapa nuevo o existente que use 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" />