Cómo crear IDs de mapa

Selecciona la plataforma: Android iOS JavaScript Servicio web

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.

Para obtener más detalles y funciones que usan IDs de mapa, consulta la Descripción general de los IDs de mapa.

Permisos necesarios

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

Crea IDs de mapa

Crea IDs de mapa en la consola de Cloud siguiendo estos pasos:

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

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

  3. Haz clic en 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. Haz clic en Guardar para mostrar el nuevo ID de mapa.

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

Si usas diseños de mapas basados en la nube, asocias un diseño de mapa con tu ID de mapa. Para obtener más información, consulta Cómo asociar.

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 tener 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 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 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=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.