Comenzar

Para usar la vista previa del diseño basado en datos, debes crear un ID de mapa que utilice el mapa de vectores de JavaScript. A continuación, debes crear un nuevo diseño de mapa, seleccionar las capas de elementos de límite que deseas incluir y asociar el diseño con tu ID de mapa.

Si planeas usar la API de Region Lookup, debes habilitarla en la Consola de API de Google.

Habilitar la API de Region Lookup

Crea un ID de mapa

Para crear un ID de mapa nuevo, sigue los pasos que se indican en Personalización de Cloud. Configura el tipo de mapa como JavaScript y selecciona la opción Vector. Marca las opciones Inclinación o Rotación para habilitar la inclinación y la rotación en el mapa. Si el uso de la inclinación o la orientación afecta negativamente el funcionamiento de tu app, deja sin marcar las opciones Inclinación y Rotación para que los usuarios no puedan ajustar estos parámetros.

Crea un ID de mapa de vectores

Crea un nuevo diseño de mapa

Para crear un nuevo diseño de mapa, sigue las instrucciones que se indican en Cómo administrar diseños de mapa y asocia el diseño con el ID de mapa que acabas de crear.

Selecciona capas de elementos

En la Consola de API de Google, puedes seleccionar las capas de elementos que deseas mostrar. Esto determina qué tipos de límites aparecerán en el mapa (por ejemplo, localidades, estados, etcétera).

Cómo administrar las capas de elementos

En la Consola de API de Google, ve a la página Estilos de mapa.
Si se te solicita, selecciona un proyecto.
Selecciona un diseño de mapa.
Haz clic en el menú desplegable Feature layers para agregar o quitar capas.
Haz clic en Guardar para guardar los cambios y que estén disponibles en tus mapas.

Captura de pantalla que muestra el menú desplegable

Actualiza el código de inicialización del mapa

Para realizar esta acción, necesitas el ID de mapa que acabas de crear. Puedes encontrarlo en la página Administración de mapas.

Usa v=beta en la etiqueta script de tu API. Por ejemplo:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap"></script>

(Opcional) Agrega el parámetro region para establecer la región del mapa. Esto modifica tu aplicación para que muestre mosaicos de mapas diferentes según la región y también modifica los polígonos para ciertos elementos de límite. Obtén más información sobre la localización de regiones.
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=JP&libraries=places&v=beta&callback=initMap"></script>
```

Proporciona un ID de mapa cuando crees una instancia del mapa con la propiedad mapId. Debería ser el ID de mapa que configuraste mediante un diseño de mapa con capas de elementos habilitadas.

map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Agrega capas de elementos a un mapa

Para obtener una referencia a una capa de elementos del mapa, llama a map.getFeatureLayer() cuando se inicializa el mapa:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Verifica las funciones de un mapa

El diseño basado en datos requiere funciones que están habilitadas en la Consola de API de Google y asociadas a un ID de mapa. Dado que los IDs de mapa son efímeros y están sujetos a cambios, puedes llamar a map.getMapCapabilities() para verificar si una función determinada (por ejemplo, el diseño basado en datos) está disponible antes de llamarla. Esta verificación es opcional.

En el siguiente ejemplo, se muestra cómo agregar un objeto de escucha para suscribirse a los cambios de las funcionalidades del mapa:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (mapCapabilities.isDataDrivenStylingAvailable) {
    // Call data-driven styling here.
  } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable.
});