Un ID de mapa es un identificador único que representa la configuración y el diseño del mapa de Google Maps que se almacenan en Google Cloud. Usas los IDs de mapa para habilitar funciones, administrar mapas o aplicarles diseño 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 conocer las 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 adecuados a nivel del rol, Editor o Propietario, en la página de IAM de la consola de Cloud para el proyecto. Para obtener más 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:
Accede a un proyecto de la consola de Cloud y ábrelo con los permisos necesarios.
En la consola de Cloud, ve a la página de Maps Management.
Haz clic en Crear ID de mapa.
En la página Crear ID de mapa nuevo, haz lo siguiente:
- En Nombre, asígnale un nombre al ID de mapa.
- Opcional: En Descripción, describe para qué se usa el ID de mapa.
- 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 de vectores, consulta Mapas de vectores.
- Haz clic en Guardar para mostrar tu nuevo ID de mapa.
Asocia un ID de mapa a un diseño de mapa
Si usas el diseño de mapas basado en Cloud, asocia un diseño de mapa a tu ID de mapa. Para obtener más detalles, consulta Cómo asociar tu diseño a un 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, con 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:map="http://schemas.android.com/apk/res-auto"
....
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 diseños personalizados configurados en el primer paso se aplican a todos los mapas con el ID de mapa especificado.
Android 3D
Establece la propiedad de cadena mapId en el Map3DOptions de forma programática o con atributos de diseño. Map3DOptions se proporcionan al objeto Map3DView durante la creación de instancias y no se pueden cambiar después de que se construye Map3DView.
Agrega un ID de mapa y crea el mapa de forma programática:
import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode
class MainActivity : Activity(), OnMap3DViewReadyCallback {
fun onCreate(...) {
val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
val map3DView = Map3DView(context, map3DOptions)
map3DView.getMap3dViewAsync(this)
}
}
Agrega un ID de mapa con atributos de diseño:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map3d="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<com.google.android.gms.maps3d.Map3DView
android:id="@+id/map3dView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
map3d:mode="hybrid"
map3d:mapId="MAP_ID"/>
</LinearLayout>
iOS
Para crear una instancia de un mapa con un ID de mapa, haz lo siguiente:
- Crea un
GMSMapIDcon la cadena del ID de mapa de la consola de Cloud. - Crea un objeto
GMSMapViewque 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 nuevo diseño en cualquier momento, y ese diseño se reflejará automáticamente en tu vista de mapa en un plazo de seis horas para ti y los usuarios.
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. Luego, se mostrará el mapa actualizado.
iOS 3D
Los desarrolladores de iOS pueden establecer un nuevo modificador style en Map. Este modificador acepta un ID de mapa y, de manera opcional, un cierre para invocar cuando el ID de mapa no sea válido o no se encuentre.
import SwiftUI
import GoogleMaps3D
struct ContentView: View {
init () {
Map.apiKey = "YOUR_API_KEY"
}
var body: some View {
Map(initialCamera: .init(
latitude: 0.0,
longitude: 0.0,
),
mode: .hybrid
)
.style(
with: "MAP_ID",
error: {
// Handle styling error.
}
)
// Could also use trailing closure syntax
// .style(with: "MAP_ID") {
// // Handle styling error.
// }
}
}
JavaScript
Para crear un mapa con un ID de mapa en el código de la aplicación, haz lo siguiente:
Si ya estás personalizando tu mapa con código JSON integrado, quita la propiedad
stylesde tu objetoMapOptions. De lo contrario, omite este paso.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' });
JavaScript 3D
Para crear un mapa con un ID de mapa en tu aplicación, agrega un ID de mapa al mapa con la propiedad mapId. Por ejemplo:
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200, }, tilt: 67.5, heading: 108.94057782079429, range: 6605.57279990986, mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs. mode: 'HYBRID', }); document.body.append(map); } void init();
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=MAP_ID&signature=YOUR_SIGNATURE" />