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.

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

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

Permisos necesarios

Para crear o administrar cualquier ID o diseño 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 los IDs de mapa y actualizar los diseños asociados con estos en cualquier momento 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. Selecciona Crear ID de mapa nuevo para mostrar el formulario Crear 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.

Cómo asociar 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 de 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 que 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 este ID de mapa.

Agrega el ID de mapa a tu app

Android

Agrega 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 un GMSMapID con la string del ID de mapa desde la consola de Cloud.
  2. Crea un GMSMapView y especifica 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 establecer un diseño nuevo en cualquier momento. El diseño se reflejará automáticamente en tu vista de mapa para ti y los usuarios en un plazo aproximado de seis horas.

Si deseas ver los cambios de inmediato, puedes cerrar y reiniciar la app. Para ello, cierra la app, fuerza su cierre desde la lista de apps usadas recientemente y vuelve a abrirla. De esta forma, el mapa actualizado será visible.

JavaScript

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

  1. Si actualmente personalizas 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 al 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 servicio 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" />

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 el suelo.

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

Funciones disponibles cuando se usan los IDs de mapa

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

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