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óninitMap()
.
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 elementodiv
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>
enborder-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;
}