Cómo usar los ID de mapa

Un ID de mapa es un identificador único que se usa para representar una sola instancia de un mapa de Google. Los IDs de mapa se usan para habilitar funciones, administrar o aplicar diseño a los mapas en tus sitios web y aplicaciones. Puedes crear IDs de mapa para cada plataforma que necesites (JavaScript, Android, iOS o mapas estáticos) en tu proyecto de la consola de Google Cloud, en la página Administración de mapas.

Qué puedes hacer con los IDs de mapa

Usa IDs de mapa para habilitar componentes y diseños. Estos son algunos ejemplos de cómo usar los IDs de mapa. Para obtener una lista completa, consulta Funciones que usan IDs de mapa:

  • Diseño de mapas basado en la nube: Asocia un ID de mapa con un diseño de mapa para personalizar, administrar y diseñar tus mapas con Google Cloud Console. Disponible en todas las plataformas: JavaScript, Android, iOS y la API de Maps Static.

  • Mapas de vectores: Usa un ID de mapa para usar un mapa compuesto por mosaicos basados en vectores que se dibujan en el tiempo de carga del cliente con WebGL. Disponible en JavaScript.

  • Marcadores avanzados: Usa un ID de mapa para habilitar los marcadores avanzados. Disponible en JavaScript, Android y iOS.

Ejemplo de diseño de mapas basado en Cloud

Para usar el diseño de mapas basado en la nube para aplicar diseño a los mapas en tu sitio web y apps para Android, sigue estos pasos:

  1. Crea IDs de mapa para cada plataforma que utilices. Por ejemplo, crea un ID de mapa de JavaScript y uno de Android. Para obtener más detalles, consulta Cómo crear IDs de mapa.

  2. Configura un diseño de mapa en la consola de Google Cloud. Para obtener más información, consulta Diseño de mapas basado en la nube.

  3. Asocia ambos IDs de mapa con el diseño de mapa en la consola de Google Cloud. Para obtener más detalles, consulta Cómo asociar IDs de mapa con tu diseño.

  4. Haz referencia al ID del mapa en el código JavaScript de tu sitio web y en el código de tu app para Android. Para obtener más detalles, consulta Cómo agregar un ID de mapa a tu app.

Luego, el diseño de mapa asociado con tus IDs de mapa se mostrará en tu sitio web y en tu app para Android. Puedes actualizar el diseño de mapa en la consola de Cloud, y los cambios aparecerán en ambos lugares automáticamente, sin que los clientes deban actualizar la app.

Componentes que usan IDs de mapa

En la siguiente tabla, se muestran las funciones y las APIs de Google Maps Platform que usan los IDs de mapa:

Función o API Usa IDs de mapa para lograr estos objetivos.
Marcadores avanzados Habilita los marcadores avanzados. No es necesario que crees un ID de mapa, sino que puedes usar el ID de mapa de demostración "DEMO_MAP_ID".
Diseño basado en datos aplicable a límites Asocia el ID de mapa con un conjunto de límites y diseños para aplicarlos al mapa según los límites.
Diseño basado en datos aplicable a conjuntos de datos Asocia el ID de mapa con un conjunto de datos y diseños para aplicarle un diseño según el conjunto de datos.
Flutter Aplica diseño a los mapas de Google que se usan en tus apps para Flutter.
API de Maps Embed Especifica y aplica diseño al mapa que se incorporará en una página web.
API de Maps JavaScript Aplica diseño al mapa para que se muestre en una página web.
SDK de Maps para Android Aplica diseño al mapa para que se muestre en una aplicación para Android.1
SDK de Maps para iOS Aplica diseño al mapa para que se muestre en una aplicación para iOS.1
API de Maps Static Especifica y aplica diseño al mapa para que se renderice como una imagen estática.
Soluciones de movilidad Usa la API de Maps JavaScript y los SDKs para iOS y Android para aplicar diseño a los mapas en soluciones de movilidad.1
WebGL (mapas vectoriales) Habilita las funciones de WebGL con un ID de mapa vectorial de JavaScript.

1 El uso de un ID de mapa en el SDK de Maps para Android o el SDK de Maps para iOS activa una carga de mapa que se cobra según el SKU de Dynamic Maps.

Cómo crear y usar IDs de mapa

Un ID de mapa es un identificador único que representa una sola instancia de un mapa de Google. Puedes crear IDs de mapa y actualizar el diseño de mapa asociado con un ID de mapa en Cloud Console.

Permisos necesarios

Para crear o administrar cualquier ID de mapa en tu proyecto, debes usar una principal con los permisos adecuados a nivel del rol, editor o propietario, en la página de IAM de Cloud Console del proyecto. Para obtener detalles, consulta la Referencia de roles básicos y predefinidos de IAM.

Crea IDs de mapa

Puedes crear IDs de mapa y actualizar los estilos asociados con estos en cualquier momento en Cloud Console.

Para crear un ID de mapa, sigue estos pasos:

  1. Accede a un proyecto de Cloud Console y ábrelo con los permisos necesarios.

  2. En la consola de Cloud, ve a la página Administración de mapas.

  3. Selecciona Crear ID de mapa.

    Pantalla para crear ID de mapa nuevo

  4. En la página Crear ID de mapa nuevo, haz lo siguiente:

    1. En Nombre, asigna un nombre al ID de mapa.
    2. Opcional: En Descripción, describe para qué se usa el ID del mapa.
    3. En Tipo de mapa, selecciona la plataforma en la que planeas usar el ID de mapa. Si eliges JavaScript, también elige un tipo de mapa Raster (el predeterminado) o Vector. Para obtener más información sobre los mapas vectoriales, consulta Mapas vectoriales.
    4. Selecciona Guardar para mostrar tu nuevo ID de mapa.

Asocia un ID de mapa a un diseño de mapa

En estas instrucciones, se da por sentado que tu proyecto tiene al menos un estilo de mapa existente. Si no tienes ningún diseño de mapa, consulta Diseño de mapas basado en Cloud y selecciona tu plataforma para obtener instrucciones sobre cómo crear uno.

  1. En la consola de Cloud, ve a la página Administración de mapas.
  2. En la tabla, selecciona un ID de mapa existente.
  3. En Diseño de mapa asociado, selecciona un diseño de mapa.

  4. Selecciona Guardar.

    Página de detalles de un ID de mapa, en la que asocias un diseño de mapa

Cómo agregar el ID de mapa a tu app

Android

Puedes agregar tu ID de mapa a través de un elemento <fragment> en el archivo de diseño de la actividad mediante la clase MapView o de manera programática con la clase GoogleMapOptions.

Por ejemplo, supongamos que creaste un ID de mapa que se almacena como un valor de string llamado map_id en res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Para los mapas agregados a través de un elemento <fragment> en el archivo de diseño de la actividad, todos los fragmentos del mapa que deberían tener el estilo personalizado deben especificar el ID del mapa en el atributo map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

También puedes usar el atributo map:mapId de la clase MapView para especificar un ID de mapa:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

Para especificar un ID de mapa de manera programática, pásalo a una instancia de MapFragment con la clase GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

En Android Studio, compila y ejecuta tu app como lo harías normalmente. Los estilos personalizados configurados en el primer paso se aplican a todos los mapas con el ID de mapa especificado.

iOS

Para crear una instancia de un mapa con un ID de mapa, haz lo siguiente:

  1. Crea un GMSMapID con la cadena de ID de mapa desde la consola de Cloud.
  2. Crea un GMSMapView que especifique el ID de mapa que acabas de crear.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Si usas tu propio ID de mapa, puedes configurarlo en la consola de Cloud para que tenga un estilo nuevo en cualquier momento, y ese estilo se reflejará en la vista de mapa automáticamente para ti y los usuarios en un plazo de seis horas.

Si quieres ver los cambios de inmediato, puedes cerrar y reiniciar la app. Para ello, sal de la app, fuerza su cierre desde la lista de apps usadas recientemente y, luego, vuelve a abrirla. Se mostrará el mapa actualizado.

JavaScript

Para crear un mapa con un ID de mapa en el código de tu aplicación, sigue estos pasos:

  1. Si ya estás personalizando tu mapa con código JSON incorporado, quita la propiedad styles de tu objeto MapOptions. De lo contrario, omite este paso.

  2. Agrega un ID de mapa con la propiedad mapId. Por ejemplo:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

Para agregar un ID de mapa a un mapa nuevo o existente que use una de nuestras APIs de servicios 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=MAP_ID&signature=YOUR_SIGNATURE" />

Un mapa centrado en el Puente de Brooklyn en la ciudad de Nueva York, NY, EE.UU., con controles de mapa en la esquina inferior derecha. El mapa muestra diseños personalizados en las rutas, el agua y la tierra.

Si tienes una firma digital en tu URL estática de Maps antes de agregar el ID de mapa, deberás crear y agregar una nueva firma digital después de agregar el ID de mapa. Cuando generes tu nuevo secreto de firma de URL, recuerda quitar la firma digital anterior de la URL.