Cómo comenzar

Sigue estos pasos para agregar la Biblioteca de Contexto local a tu proyecto, así como para inicializar y configurar la vista de mapa de Contexto local.

Cómo habilitar las APIs y los SDKs necesarios

Para usar la Biblioteca de Contexto local, debes habilitar la API de Maps JavaScript y la API de Places. Sigue las instrucciones para habilitar una o más APIs o SDKs. Ten en cuenta que ambas APIs deben estar habilitadas en el mismo proyecto en la consola de Google Cloud.

Cómo cargar la Biblioteca de Contexto local

Para cargar la Biblioteca de Contexto local, carga la API de Maps JavaScript como lo harías normalmente y, además, incluye los siguientes parámetros:

  • libraries=localContext: Carga la Biblioteca de Contexto local.
  • v=beta: Es necesario para usar esta versión.
  • key: Contiene tu clave de API.
  • callback: Ejecuta la función initMap().

En el siguiente ejemplo, se muestra una etiqueta de secuencia de comandos con todas las opciones antes mencionadas:

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

Cómo crear una nueva vista de mapa de Contexto local

Para agregar la Biblioteca de Contexto local a una página web, primero crea una instancia de LocalContextMapView y configura las propiedades deseadas:

  • element: Es el elemento div en el que se debe mostrar el mapa (en este caso, se llama "map").
  • placeTypePreferences: Son los tipos de lugares que debe mostrar la Biblioteca de Contexto local (hasta 10).
  • maxPlaceCount: Es la cantidad máxima de lugares que se muestran (de 1 a 24).
  • locationRestriction (opcional): Restringe la búsqueda de lugares a una ubicación específica. El valor predeterminado es el viewport del mapa.

Una vez que tengas una instancia de LocalContextMapView, puedes establecer Opciones de mapa en la instancia del Map interno. El mapa que se incluye en una LocalContextMapView admite las mismas opciones que un mapa estándar de la API de Maps JavaScript. En el siguiente ejemplo, se muestra cómo crear una nueva instancia de LocalContextMapView y cómo configurar algunas opciones en el Map interno:

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;

Cómo posponer la carga de datos de Contexto local

Para posponer la carga de datos de Contexto local en el momento de inicialización, debes configurar la opción LocalContextMapView maxPlaceCount en 0. Esto es útil cuando deseas esperar hasta que los usuarios estén listos para ver los datos. Una vez que esté todo listo para cargar los datos a Contexto local, establece maxPlaceCount en un valor de 1 o más. En el siguiente ejemplo, se muestra cómo inicializar el mapa sin cargar datos de Contexto local y, luego, configurar maxPlaceCount para cargarlos:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Cómo activar o desactivar la visualización de la IU de Contexto local

Para activar o desactivar los elementos de la interfaz de usuario de Contexto local, establece la opción LocalContextMapView maxPlaceCount en 0. Para volver a mostrar la interfaz de usuario de Contexto local, establece maxPlaceCount en un valor de 1 o más.

Cómo establecer dimensiones del mapa mínimas

La Biblioteca de Contexto local cambia de forma responsiva el modo en que se muestra según el tamaño de renderizado de LocalContextMapView. Estas son las dimensiones mínimas que se admiten para LocalContextMapView:

  • 300 píxeles x 480 píxeles (vertical)
  • 480 píxeles x 380 píxeles (horizontal)

Cuando el elemento que contiene LocalContextMapView reduce sus dimensiones por debajo de las mínimas admitidas, los elementos de la Biblioteca de Contexto local, incluidos el selector de lugar y los lugares de interés, no son visibles. El nivel de zoom del navegador afecta las dimensiones mínimas admitidas. Por ejemplo, si la ventana del navegador utiliza un zoom del 200%, las dimensiones mínimas admitidas son de 600 x 960 (vertical) y 960 x 760 (horizontal).

Recomendaciones de CSS

Las clases de CSS del DOM de la Biblioteca de Contexto local no forman parte de la API pública, y no se permite rediseñar, modificar ni seleccionar elementos en el DOM de la Biblioteca de Contexto local. Te recomendamos que sigas los lineamientos que se indican a continuación para evitar los conflictos de diseño del DOM, y que te asegures de que la vista del mapa de la Biblioteca de Contexto local se muestre correctamente:

  • No uses las clases de CSS de la Biblioteca de Contexto local, ya que pueden cambiar sin aviso previo.
  • No diseñes, modifiques ni selecciones elementos del DOM de la Biblioteca de Contexto local.

Si usas un framework de CSS que realiza esas modificaciones, tal vez puedas solucionar los conflictos de diseño.

Por ejemplo, si quieres cambiar la página general de box-sizing a border-box, haz lo siguiente:

  • Usa las anulaciones box-sizing que establecen el elemento <html> en border-box.
  • Usa box-sizing: initial para el elemento que contiene la vista de mapa de la Biblioteca de Contexto local.
  • Usa box-sizing: inherit para todos los demás elementos.

Esto garantiza que se restablezca el valor box-sizing del DOM de la Biblioteca de Contexto local al valor predeterminado estándar con un selector de baja especificidad.

El código se ve del siguiente modo:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}