En esta sección, se describen las opciones que puedes configurar en una instancia de LocalContextMapView
y el Map
interno que se incluye en LocalContextMapView
. Cuando creas una instancia nueva de LocalContextMapView
, especificas hasta 10 tipos de lugares, junto con una cantidad máxima de lugares que se pueden mostrar (hasta 24). El Map
interno admite las mismas propiedades de MapOptions que un Map
estándar de la API de Maps JavaScript.
Puedes actualizar las propiedades de búsqueda de Contexto local en cualquier momento después de que se haya inicializado la Biblioteca de Contexto local. La actualización de maxPlaceCount
, placeTypePreferences
, locationRestriction
o locationBias
puede activar automáticamente una búsqueda nueva.
Cómo especificar los tipos de lugares
Puedes especificar hasta 10 tipos de lugares que la Biblioteca de Contexto local puede mostrar. Usa la propiedad placeTypePreferences
para especificar los tipos de lugares y pasa uno o más tipos de lugares, como se muestra en el siguiente ejemplo:
placeTypePreferences: ['restaurant', 'cafe']
Ponderación del tipo de lugar
De forma opcional, puedes asignar un peso relativo a cada tipo especificado; de esta forma, los tipos con un valor de ponderación más alto aparecerán con mayor frecuencia. El peso es un parámetro opcional y avanzado que solo se debe usar cuando sea necesario. Cuando se omite este parámetro, la Biblioteca de Contexto local determinará los pesos predeterminados, que pueden cambiar y mejorar con el tiempo.
Puedes usar el atributo weight
para asignar un peso relativo a cada propiedad. En el siguiente ejemplo, se muestra cómo ponderar los tipos de lugares especificados para mostrar el doble de resultados de restaurant
y cafe
que de primary_school
:
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
Los resultados variarán en función de la existencia de un tipo de lugar en particular en un área determinada. Por ejemplo, asignar un peso de 10 a shopping_mall
no tendrá ningún efecto si no hay centros comerciales en el área.
Cómo establecer la cantidad máxima de lugares
Para establecer la cantidad máxima de lugares (hasta 24) que la Biblioteca de Contexto local puede mostrar, usa la propiedad maxPlaceCount
, como se muestra a continuación:
maxPlaceCount: 12
Cómo configurar una restricción de ubicación
Las búsquedas están vinculadas al viewport del mapa de forma predeterminada. Puedes especificar un conjunto de límites para restringir los resultados de la búsqueda a un área más grande o más pequeña. Para ello, establece la propiedad locationRestriction
de LocalContextMapView
con los valores de LatLngBounds
deseados. Este valor puede ser mayor o menor que el viewport del mapa.
Aquí puedes consultar un ejemplo.
Habilita las instrucciones sobre cómo llegar
Si deseas habilitar las instrucciones sobre cómo llegar en tu mapa, configura la propiedad directionsOptions
de LocalContextMapView
. Para ello, pasa un literal del objeto LatLng para el punto de origen (el destino está determinado por el lugar seleccionado actualmente). Si no se pasa un punto de origen, se inhabilitarán las instrucciones sobre cómo llegar. En el siguiente ejemplo, se muestra cómo configurar un punto de origen para habilitar las instrucciones sobre cómo llegar a pie en un mapa:
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
El tamaño del viewport del mapa, según lo definido por los límites del mapa y el nivel de zoom, influye directamente en las distancias que se pueden mostrar a partir de un determinado punto de origen. Por ejemplo, si el viewport está configurado para mostrar un área de 160 km de ancho, es posible que los lugares de interés aparezcan en un radio de hasta 80 km desde el punto de origen. Para asegurarte de que tu app muestre rutas a pie con distancias razonables, puedes hacer lo siguiente:
- Inhabilita las instrucciones sobre cómo llegar a pie en niveles de zoom más bajos (por lo general, inferiores al nivel de zoom 16).
- Define una
locationRestriction
con un área de límites más restringidos. Esto evitará que se muestren lugares de interés fuera de esa área.
Cambia el origen de las instrucciones sobre cómo llegar
Puedes cambiar el valor de la propiedad directionsOptions
en cualquier momento durante el ciclo de vida de LocalContextMapView
. En el siguiente ejemplo, se muestra cómo configurar un valor nuevo para directionsOptions
:
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
o
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
Cómo configurar el diseño y la visibilidad
Si deseas configurar la posición inicial del diseño y las opciones de visibilidad de la vista de detalles del lugar y el selector de lugares, establece las propiedades placeChooserViewSetup
y placeDetailsViewSetup
de LocalContextMapView
. También puedes ocultar la vista de detalles del lugar de manera programática.
Cómo configurar la posición de diseño del selector de lugares
Puedes configurar la posición de diseño del selector de lugares al inicializar LocalContextMapView
. La posición de diseño es relativa a la dirección del documento y variará según tu app se lea de izquierda a derecha (LTR) o de derecha a izquierda (RTL).
Hay tres opciones de diseño para el selector de lugares:
INLINE_START
establece que el selector de lugares se mostrará al COMIENZO del flujo de contenido (lado izquierdo del mapa para LTR, lado derecho para RTL).INLINE_END
establece que el selector de lugares se mostrará al FINAL del flujo de contenido (lado derecho del mapa para LTR, lado izquierdo para RTL).BLOCK_END
establece que el selector de lugares se mostrará en la parte INFERIOR de la página (tanto para LTR como para RTL).
Cuando configuras la posición del selector de lugares en INLINE_START
o INLINE_END
, siempre debes establecer el mismo valor para la posición de la vista de detalles del lugar.
De forma opcional, puedes configurar la vista de detalles del lugar para que se muestre en una ventana de información.
Para BLOCK_END
, el modo de diseño de la vista de detalles del lugar SIEMPRE se debe establecer en INFO_WINDOW
.
La Biblioteca de Contexto local cambia de forma responsiva la posición del selector de lugares según el tamaño renderizado de LocalContextMapView
. De forma predeterminada, en una LocalContextMapView
más grande, el selector de lugares aparece al comienzo del flujo de contenido (en el lado izquierdo del mapa para LTR, en el lado derecho para RTL). En una LocalContextMapView
más pequeña (por ejemplo, en un dispositivo móvil), el valor predeterminado cambia para mostrar el selector de lugares en la parte inferior del mapa y muestra los detalles del lugar en una ventana de información. El nivel de zoom del navegador afecta las dimensiones en píxeles en las que la posición del selector de lugares cambia entre los costados y la parte inferior (el umbral aumenta proporcionalmente con el nivel de zoom).
Te recomendamos que uses llamadas a funciones para configurar la posición predeterminada del selector de lugares. La declaración directa de estos valores anulará cualquier cambio de diseño responsivo.
Cómo mostrar el selector de lugares al comienzo del flujo de contenido
Si deseas que el selector de lugares aparezca al comienzo del flujo de contenido (en el lado izquierdo del mapa para LTR, en el lado derecho para RTL), establece la position
en INLINE_START
para placeChooserViewSetup
y placeDetailsViewSetup
, como se muestra en el siguiente ejemplo:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
Cómo mostrar el selector de lugares al final del flujo de contenido
Si deseas que el selector de lugares aparezca al final del flujo de contenido (en el lado derecho para LTR, en el lado izquierdo para RTL), establece la position
en INLINE_END
para placeChooserViewSetup
yplaceDetailsViewSetup
, como se muestra en el siguiente ejemplo:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
});
Cómo mostrar el selector de lugares en la parte inferior
Si deseas que el selector de lugares aparezca en la parte inferior del mapa, establece la position
de placeChooserViewSetup
en BLOCK_END
y el layoutMode
de placeDetailsViewSetup
en INFO_WINDOW
, como se muestra en el siguiente ejemplo:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
Cómo ocultar el selector de lugares
El selector de lugares está visible de forma predeterminada. Para ocultarlo, establece el layoutMode
en HIDDEN
, como se muestra en el siguiente ejemplo:
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
En el siguiente ejemplo, se muestra cómo ocultar el selector de lugares cuando la posición predeterminada cambia a BLOCK_END
:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
Cómo mostrar la vista de detalles del lugar en una ventana de información
Para que la vista de detalles del lugar se muestre en una ventana de información, establece el layoutMode
en INFO_WINDOW
, como se muestra en el siguiente ejemplo:
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
Puedes combinar esta configuración con cualquier posición del selector de lugares (izquierda, derecha o inferior).
Cómo ocultar la vista de detalles del lugar de manera programática
Puedes ocultar de manera programática la vista de detalles del lugar si llamas a hidePlaceDetailsView()
en una instancia de LocalContextMapView
, como se muestra en el siguiente ejemplo:
localContextMapView.hidePlaceDetailsView()
De forma predeterminada, cuando un usuario hace clic en el mapa, se oculta la vista de detalles del lugar. Puedes establecer la opción hidesOnMapClick
de placeDetailsViewSetup
en false
para evitar este comportamiento predeterminado.
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
Para ocultar solo la ventana de información de detalles del lugar cuando se hace clic en el mapa, puedes controlar de forma condicional la configuración del valor hidesOnMapClick
, como se muestra en el siguiente ejemplo:
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
Cómo configurar las opciones de un Map
interno
Una vez que tengas una instancia de LocalContextMapView
, puedes establecer propiedades de MapOptions en la instancia de Map
interno. El Map
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 instancia nueva de LocalContextMapView
y cómo configurar algunas opciones en el Map
interno:
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}