Cómo usar los IDs de mapa

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.

Una vez creados, los IDs de mapa se asocian con un proyecto y también se restringen a una sola plataforma (Android, iOS o JavaScript) o a la API de Maps Static.

Para crear o administrar cualquier ID de mapa en Cloud Console, debes tener la función de IAM de propietario o editor del proyecto.

Permisos necesarios

Para crear o administrar cualquier ID o estilo de mapa en un proyecto de Google Cloud determinado, debes tener el rol de IAM de propietario o editor en el proyecto.

Crea un ID 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 un diseño asociado con un ID de mapa en cualquier tiempo en la consola de Cloud.

Para crear un ID de mapa, sigue estos pasos:

  1. En Cloud Console, ve a la página Administración de mapas (Map Management).
  2. Haz clic en Crear ID de mapa nuevo (Create New Map ID) para mostrar el formulario Crea un ID de mapa nuevo.
    Pantalla para crear ID de mapa nuevo

    En el formulario, haz lo siguiente:

    • Especifica un nombre de mapa.
    • Especifica un tipo de mapa o una plataforma.
    • Para los mapas de JavaScript, elige el tipo de mapa de trama o vectorial.
    • Ingresa una descripción del mapa.
    • Selecciona Siguiente para mostrar el nuevo ID de mapa.

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

En estas instrucciones, se da por hecho que tu proyecto tiene al menos un estilo de mapa existente.

  1. En Cloud Console, ve a la página Administración de mapas (Map Management).
  2. En esta página, selecciona un ID de mapa existente en la columna Nombre del mapa.
  3. En la parte inferior de este formulario, elige un estilo de mapa del menú desplegable Estilos de mapa asociados con este ID de mapa (Map styles associated with this Map ID).
  4. Selecciona Guardar.
    Captura de pantalla en la que se muestra la página de detalles de un solo ID de mapa, incluido el campo desplegable que permite a los usuarios asociar un diseño de mapa con ese ID.

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">YOUR_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"
    class="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 utilizando 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, tal como se configuraron en el primer paso, se aplicarán a todos los mapas con un ID.

iOS

Para crear una instancia de un mapa con un ID de mapa, sigue estos pasos:

  1. Crea una GMSMapID con la cadena del ID de mapa de la consola de Cloud.
  2. Crea una 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: "<YOUR 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:@"<YOUR 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 actualmente 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 utilice uno de nuestros las APIs de servicio 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" />

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 un diseño personalizado de las rutas, el agua y el terreno.

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.

Funciones disponibles cuando se utilizan los IDs de mapa

Diseño de mapas basado en la nube: Diseña, personaliza y administra tus mapas con Google Cloud Console.
Disponible en todas las plataformas (Android, JavaScript, iOS y API de Maps Static)

Mapas vectoriales: Un mapa compuesto por mosaicos basados en vectores, que se dibujan en el tiempo de carga del cliente con WebGL.
Disponible en JavaScript